• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsleiste verfeinern

H

Hansii

Mitglied
Hi.

Ich habe folgende Navigation:

Obst
-Apfel
-Birne
-Banane
Gemüse
-Tomate
-Spargel
-Spinat

Die Unterpunkte von "Obst" und "Gemüse" sollen nur angezeigt werden beim hovern.

Wie kann ich diese ausblenden und bei hover einblenden? Welcher Befehl ist richtig ?
 
Hi.

Jetzt habe ich mir die Website angeschaut und finde da nur fertige Menüs aber keine Befehle (zugegeben ist mein Englisch auch nicht das beste).

Mir würde nur der Befehl reichen, den Rest kann ich ja Googeln :D

Danke
 
Es gibt dazu keinen Befehl! Und man kann sich bei den fertigen Menüs den Quellcode inkl. CSS ansehen und das übernehmen.
 
Rechte Maustaste, "Seitenquelltext anzeigen" und den relevanten Code rauskopieren.
 
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drop-Down Navigation mit CSS+</title>

 <style type="text/css">
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}



/******************************** HORIZONTALE nAVI**********************************************/

#hnavi  {
  float:left;
  background:#daa;
}

#hnavi a {
 display:block;
 padding:5px 10px;
 color:#fff;
 font-weight:bold;
 display:block;
}


#hnavi li  {
 float:left; 
 position:relative;
 display:block;
}

#hnavi ul li {
 display:block;
 float:none;
}

/* Alle Ebenen ausblenden */

#hnavi ul  ,
#hnavi  li:hover ul {
 position:absolute;
 left:-9999px;
}


#hnavi  li:hover  ul  {
 position:absolute;
 left:0;
 top:auto;
}

#hnavi ul  {
 background:#dad;
}



#hnavi li:hover > a , #hnavi  ul li:hover  > a  {
  background:#add;
  color:#fff;
}

/************************************ vertikale navi*********************************/

#navi  {
  float:left;
  background:#daa;
}

#navi a {
 display:block;
 padding:5px 10px;
 color:#fff;
 font-weight:bold;
 display:block;
}


#navi li  {
 position:relative;
 display:block;
}



/* Alle Ebenen ausblenden */
#navi { margin-left:30px;} /* Nur für's Beispiel */
#navi ul  ,
#navi  li:hover ul {
 position:absolute;
 left:-9999px;
}

#navi  li:hover  ul  {
 position:relative;
 left:0;
 top:auto;
}

#navi ul  {
 background:#dad;
}



#navi li:hover > a , #navi  ul li:hover  > a  {
  background:#add;
  color:#fff;
}
 
 </style>
 
</head>

<body id="home">

<ul id="hnavi">
 <li><a href="#">Obst &raquo; </a>
  <ul>
    <li><a href="#">Apfel </a></li>
    <li><a href="#">Birne </a></li>
    <li><a href="#">Banane </a></li>
  </ul> 
 </li>

 <li><a href="#">Gemüse &raquo; </a>
  <ul>
    <li><a href="#">Tomate </a></li>
    <li><a href="#">Spargel </a></li>
    <li><a href="#">Spinat</a></li>
  </ul>
 </li>
</ul>


<ul id="navi">
 <li><a href="#">Obst &raquo; </a>
  <ul>
    <li><a href="#">Apfel </a></li>
    <li><a href="#">Birne </a></li>
    <li><a href="#">Banane </a></li>
  </ul> 
 </li>

 <li><a href="#">Gemüse &raquo; </a>
  <ul>
    <li><a href="#">Tomate </a></li>
    <li><a href="#">Spargel </a></li>
    <li><a href="#">Spinat</a></li>
  </ul>
 </li>
</ul>

</body></html>

Einfach kopieren, probieren und entscheiden.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben