Einbinden von Javascript in Site - Totale Anfänger Frage - Sorry

andreasFFM · 09. März 2015

Hallo zusammen,

Es tut mir sehr leid eine solche Frage zu stellen aber ich habe von Javascript nur sehr, sehr rudimentäre Kenntnisse und ein Problem was wohl so einfach ist, dass ich nirgends eine Antwort/Erklärung finden konnte...

Ich möchte auf meiner Website ein Menü einbauen welches erst beim klick auf einen Button erst erscheint. Die Scripte dafür habe ich mir im Web schon zusammengesucht...

aber ich bekomme sie nicht zum laufen. Der css teil und die Einbindung des script in die Seite ist wohl richtig aber die Funktion zu starten gelingt mir nicht...

Der Ursprungscode ist von hier javascript - Mobile navigation menu from apple website - Stack Overflow - davon das erste script.
(auch wenn hier das Symbol und X verkehrt herum, zum öffnen/schließen des Menüs, funktionieren - aber ich denke das kann geändert werden

)

Ich habe keine Ahnung wie ich das zum laufen bekomme - bitte eine Erklärung für Dummies oder den korrekten Code - Bitte! (Erklärung und Code wäre das non plus ultra - dann könnte ich es ja irgendwann verstehen und auch mal ganz alleine machen:icon7:

Danke für Eure Nachsicht

Grüße
Andreas

Meine Versuche sehen jetzt so aus und das "eingebundene" script funktioniert nicht

HTML:

<head>

<script type="text/javascript">

$('.header-top input').on('click', function () {
    if ($(this).val() == '=') {
        $(this).val('x');
        $('.header-bot').hide();
    } else {
        $(this).val('=');
        $('.header-bot').show();
    }
});
</script>


</head>



<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="header">
        <div class="header-top">
            <input type="button" value="=">
        </div>
        <div class="header-bot">
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
        </div>
    </div>

</body>

- - - Aktualisiert - - -

Nachdem ich nun tagelang nach dem Problem gesucht habe... und jetzt auch hier das Forum zugemüllt habe... kam ich dann kurz nach dem posten meiner Frage doch selbst drauf...

Man muss halt eine function auch als Funktion benennen und dem html auch sagen was beim klick passieren soll...

man kann ja sooo doof sein - bzw. vielleicht mal selber denken und nicht nur kopieren...!

aber eine Frage habe ich doch noch:
wie kann ich das script ändern dass beim laden der Seite das Menü geschlossen ist?
und warum muss man, bei mir, den button zweimal drücken bevor etwas passiert?

Also doch nochmal Hilfe! Bitte!

Danke
Andreas

Mein Code online: http://daswirdwas.de/_TEST/menu.html

Hier mein neuer Code

HTML:

<!DOCTYPE html>
<html>
<head>

<style type="text/css">

body {
    margin:auto;
    background: #f2f2f2;
}
.header {
    position:relative;
    background-color: #fff;
    font-size:2em;
    height: 50px;
}
.header-top {
    height: 50px;
    font-family: sans-serif;
    font-size: 14px;
}
.header-top input {
    float:left;
    font-size:inherit;
    padding:0;
    border-style:none;
    background-color:transparent;
    height: 50px;
    outline: none;
    margin-left: 15px;
    cursor: pointer;
}
.header-bot {
    position:absolute;
    width:100%;
    overflow:hidden;
    overflow-x: auto;
    background-color: #fff;
    border-top: 1px solid #f2f2f2;
    display: inline-block;
}
.header-bot ul {
	width: 200%;
}
.header-bot li {
	display: inline-block;
    margin-left:0.5em;
    float: left;
    text-decoration:none;
    color: #999;
    list-style: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 14px;
    
}
.header-bot li:hover {
    color: #000;
}
</style>

<script >
function openMenu() {
$('.header-top input').on('click', function () {
    if ($(this).val() == 'x') {
        $(this).val('=');
        $('.header-bot').hide();
    } else {
        $(this).val('x');
        $('.header-bot').show();
    }
})
}
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>
    <div class="header">
        <div class="header-top">
            <input type="button" value="=" onclick="openMenu()">
        </div>
        <nav class="header-bot">
         <ul>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
            <li>google</li>
            <li>yahoo</li>
            <li>msn</li>
            <li>codingforums</li>
            <li>jsfiddle</li>
          </ul>
        </nav>
    </div>
</body>
</body>
</html>

schlegel.berlin · 11. März 2015

Warum machst Du das nicht mit CSS?

Hier mal ein Beispiel, das Du sicher leicht modifizieren kannst.
Es ist viel einfacher und hat den Vorteil, dass es auch funktioniert, wenn der Besucher Javascript deaktviert hat.

Hier jetzt das Beispiel:

ím HEAD (oder ausgelagert als CSS-File)

Code:

<style type="text/css">
#menu {
  font-size:14px;
  position:absolute;  
}

#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;
}

#menu li.topmenu {
  float:left;
}

.topmenu a {
  float:left;
  width:110px;
  text-align:center;
}

.topmenu ul{
  display:none;
}

.topmenu a, .submenu a{
  padding:1px 5px;
  border:1px solid #C37000;
  border-collapse:collapse;
  color:#C37000;
  font-weight:bold;
  text-decoration:none;
  background-color:#7F4800;
  margin:0;  
}

.submenu a{
  font-size:12px;
  width:110px;
  position:relative;
  clear:both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#4C4C4C;
  background-color:#ffddbb !important;
}

.topmenu:hover ul {
  display:block;  
  z-index:500;
}
</style>

Im BODY an der Stelle,an der das Menü erscheinen soll:

Code:

  <div id="menu">
    <ul>
      <li class="topmenu">
        <a href="">Menü 1</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 1.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 1.2</a></li>
          <li class="submenu"><a href="">Unterpunkt 1.3</a></li>
          <li class="submenu"><a href="">Unterpunkt 1.4</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Menü 2</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 2.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 2.2</a></li>
        </ul>
      </li>
      <li class="topmenu">
        <a href="">Menü 3</a>
        <ul>
          <li class="submenu"><a href="">Unterpunkt 3.1</a></li>
          <li class="submenu"><a href="">Unterpunkt 3.2</a></li>
        </ul>
      </li>
    </ul>
  </div>

Probiers mal aus und wenn Du noch 'ne Frage hast, z.B. zur grafischen Gestaltung des Menüs im CSS, dann schreib einfach und ich helf Dir weiter ...

LG, Karin

kkapsner · 13. März 2015

Ich würde das auch mit CSS machen, aber damit du das Problem verstehst versuche ich mal das aufzuklären:

andreasFFM schrieb:
wie kann ich das script ändern dass beim laden der Seite das Menü geschlossen ist?

Du musst beim Laden der Seite einfach ein Skript laufen lassen, dass das Menü schließt. In jQuery gibt es dafür die Funktion .ready(), die eine andere Funktion ausführt, wenn die Seite "bereit" ist:

Code:

$(document).ready(function(){
	$('.header-bot').hide();
});

andreasFFM schrieb:
und warum muss man, bei mir, den button zweimal drücken bevor etwas passiert?

Du hast am Anfang einfach nicht den richtigen EventListener auf deinem <input>. Du hast da ja im onclick die funktion openMenu() drin. Die macht aber nichts anderes als dass sie einen anderen EventListener registriert. Deswegen passiert beim erst Klick nichts. Dann beim zweiten wird die beabsichtichte Funktion ausgeführt, aber openMenu() auch nochmal. Deswegen wird beim dritten mal die beabsichtige Funktion zwei mal ausgeführt - und die heben sich einfach auf. Und so geht das immer weiter. Deswegen passiert immer nur bei jedem zweiten Klick etwas - da wird die beabsichtige Funktion immer eine ungerade Anzahl mal ausgeführt.

Das Problem kannst du auch wieder mit dem .ready() lösen: entferne deine openMenu() Funktion komplett und packe den Code, der den Listener registriert in das gleiche .ready() wie oben:

Code:

$(document).ready(function(){
	$('.header-bot').hide();
	$('.header-top input').on('click', function(){
		if ($(this).val() == 'x'){
			$(this).val('=');
			$('.header-bot').hide();
		}
		else {
			$(this).val('x');
			$('.header-bot').show();
		}
	})
});

PS: Natürlich muss du jQuery auch vor diesem Code laden und nicht danach...

schlegel.berlin · 13. März 2015

Danke kkapsner, das war ein gute Idee von Dir, den Lernprozess zu unterstützen ...
Bist halt ein "Guter", wovon ja auch ich selbst schon das eine oder andere Mal profitiert habe ...

Einbinden von Javascript in Site - Totale Anfänger Frage - Sorry

andreasFFM

New member

schlegel.berlin

New member

kkapsner

Super Moderator

schlegel.berlin

New member