zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdownmenü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 24.07.2014, 00:35
z3d z3d ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 24.07.2014
Beiträge: 1
z3d befindet sich auf einem aufstrebenden Ast
Beitrag Dropdownmenü

Hallo.. ich bräuchte Hilfe bei der Erstellung eines DropDownMenüs für meine Website.

Hier ein Screenshot des Designs(bei einem "hover" ändert sich die Darstellung des Buttons):


Hier noch mein HTML-Code zu den bisherigen Buttons:
Code:
<div id="buttons">
<div id="button">
<a href="index.html"><div class="button2"><p>Home</p></div></a>
<a href="about.html"><div class="button2"><p>About</p></div></a>
<a href="unwichtig.html"><div class="button2"><p>unwichtig</p></div></a>
<a href="unwichtig.html"><div class="button2"><p>unwichtig</p></div></a>
<a href="unwichtig.html"><div class="button2"><p>unwichtig</p></div></a>
<a href="unwichtig.html"><div class="button2"><p>unwichtig</p></div></a>
</div>
</div>
Und auch der CSS-Code dazu:
Code:
body {
background-color:#24272d;
margin:0px auto;
min-width:960px;
}
#header {
width: 100%;
height: 261px;
margin:0px auto;
text-align:center;
}
#buttons {
width: 100%;
height: 39px;
}
#button {
width: 960px;
margin:0px auto;
text-align:center;
}
.button2 {
float:left;
width:160px;
height:39px;
background:url(img/button_sprites.png) no-repeat;
background-position: 0px 0px;
}
.button2 p {
font-size:20px;
font-family:Cambria;
color:white;
margin:0px;
margin-top:8px;
}
.button2 a {
text-decoration:none;
}
.button2:hover{
background-position: 0px -39px;
cursor:pointer;
}
Wäre jemand so nett, mir damit weiterzuhelfen?
Wie bekomme ich es hin, beim "hovern" auch noch einen dropdown-Effekt zu erzeugen?

Ich bedanke mich schonmal für eure Antworten. Liebe Grüße
z3d
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.07.2014, 12:23
Benutzer
neuer user
 
Registriert seit: 22.04.2014
Beiträge: 75
Toro befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
mit Menü hat dein ganzer Code wenig zu tun, und mit einem dropdownmenü noch weniger. Was Du hier hast sind ein paar divs die nebeneinander liegen (durch "float: left") und beim hovern das obere Bild verschwinden lassen (durch "height: 0 -39px").
Ja, die code könnte man benutzen um daraus ein Menu zu gestalten, ist aber wohl eher für einen button gedacht - wie der Name auch sagt. Ich würde anraten den code für ein richtiges Menü zu verwenden, und wenn das das dann noch einen zweiten level haben soll, kommt die dropdown-Funktion zum Vorschein.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.07.2014, 14:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Ein Tipp nebenbei:

Der Aufbau deiner Navigation ist nicht sonderlich schön. Du kannst so zwar die gewünschte Optik erzielen, allerdings werden barrierefreie und semantisch korrekte Navigation mit Listen erstellt.

Beispiel:

HTML-Code:
<ul>
   <li><a href="">Home</a></li>
   <li><a href="">About</a></li>
   <li><a href="">Unwichtig</a></li>
   <li><a href="">Unwichtig</a>
      <ul>
         <li><a href="">Unwichtiger Unterpunkt (Dropdown)</a></li>
         <li><a href="">Unwichtiger Unterpunkt (Dropdown)</a></li>
         <li><a href="">Unwichtiger Unterpunkt (Dropdown)</a></li>
      </ul>
   </li>
   <li><a href="">Unwichtig</a></li>
</ul>
Falls du HTML 5 verwendest, baust du noch ein nav-Element um den genannten Code herum.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hovereffekt verschwindet im Dropdownmenü Korasu CSS 3 04.12.2011 17:34
Dropdownmenü richtig ausrichten. Lost CSS 25 20.01.2011 13:11
IE 6 und Dropdownmenü - Problem wirdnix CSS 7 15.11.2010 20:24
Dropdownmenü Problem Massacre CSS 10 15.12.2009 14:49
[CSS] DropDownMenü ans Laufen bekommen - Hilfe! rted CSS 4 12.11.2008 19:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:04 Uhr.