Erstellen eine onclick-Ereignis für eine Schaltfläche mit einer dropdown-Menü
Ich habe gelernt, HTML und CSS für ein paar Wochen jetzt, und ich fange wohl fühlen mit diesen. Aber ich versuche zu lernen, JavaScript auch.
Habe ich gearbeitet, auf einen Knopf in HTML und CSS, können Sie die demo-Taste hier.
Möchte ich, um das dropdown-Menü sichtbar, wenn Sie auf die Schaltfläche klicken und auch, wenn Sie die Schaltfläche erneut klicken, das dropdown-Menü verschwindet.
Gibt es eine einfache oder verständliche Art und Weise für die Erstellung einer Funktion, die in JavaScript?
Hier ist der code den ich habe:
HTML:
<div id="language-wrapper">
<a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
<div id="language-dropdown">
<h3>Choose your language</h3>
<a class="language-links" href="#">Chinese</a>
<a class="language-links" href="#">Danish</a>
<a class="language-links" href="#">Deutsch</a>
<a class="language-links" href="#">English</a>
<a class="language-links" href="#">Espanol</a>
<a class="language-links" href="#">Filipino</a>
<a class="language-links" href="#">Hindu</a>
<a class="language-links" href="#">Italiano</a>
<a class="language-links" href="#">Norsk</a>
<a class="language-links" href="#">Nederlands</a>
<a class="language-links" href="#">Polski</a>
<a class="language-links" href="#">Portugues</a>
<a class="language-links" href="#">Svenska</a>
<a class="language-links" href="#">Suomi</a>
<a class="language-links" href="#">Turkce</a>
<a class="language-links" href="#">Urdu</a>
<p>Do you speak multiple languages or can't find your language? <font color="#d13030">Help us translate!</font><p>
</div> <!-- end of language-dropdown class -->
</div> <!-- end of language-wrapper -->
CSS:
#language-wrapper { display: inline-block; }
#language-wrapper:hover #language-dropdown { opacity: 1; display: block; }
.language-icon {
color: #fff;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
left: 0; top: 0;
}
.fr { background: url("images/language-sprite.png") no-repeat 0 0; }
.fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }
.language-icon:before {
content:'\25BE';
width:0px;
height:0;
position:absolute;
right:16px;
top: 0;
}
.language-icon:hover:before {
color: #d13030;
content: '\25B4';
top: -1px;
}
/* ------------------ LANGUAGE DROPDOWN ------------------ */
#language-dropdown {
opacity: 0;
width: 1023px;
display: none;
margin-top: 3px;
left: 0;
position: absolute;
border: 1px solid #ddd;
background: #fff;
box-shadow: 0px 3px 3px #b3b3b3;
}
#language-dropdown h3 {
color: #d13030;
font-size: 14px;
font-weight: normal;
padding: 5px 15px 0px 15px;
}
#language-dropdown p {
font-size: 12px;
padding: 0px 0px 10px 15px;
}
#language-dropdown a {
padding: 0px 0px 0px 15px;
}
.language-links {
font-size: 12px;
text-decoration: none;
color: #2793e6;
}
.language-links:hover {
text-decoration: underline;
}
- Vanille -, javascript-oder jquery?
- Vanille javascript würde ich sagen.
InformationsquelleAutor Nohman | 2014-03-22
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
kann es sein, eine grundlegende schaltet die Anzeige-Funktion auf onclik-event:
test hier : http://codepen.io/anon/pen/cHIrd/
Hinweis:
opacity:0;
entfernt von Ihrer anfänglichen CSS -Bessere Praxis ist das wechseln der Klasse, die nicht Stil-Werte 🙂
und vielleicht setzen onclick-Ereignis per javScript.
return false Hinzugefügt werden können, zu vermeiden, Verbindung zu href .
Den Html -
JavaScript:
Hier ist ein Beispiel