✔ Navigation - wie

Status
Nicht offen für weitere Antworten.
B

buddha

Erfahrenes Mitglied
Hi,
Ich habe mal in meinen CSS Ordner rumgeschnüffelt wegen einer vernünftigen Navi mal zum testen. Die Vorlage habe ich vor vielen Monden irgendwo aus dem <Inet> . Meine Frage ist - wie bekomme ich das Submenu zum "funktionieren". Zum einen würde mich interessieren das öffnen und schliessen per Mausklick und andererseits mit einer Art Hoovereffekt wo sich das Submenü beim Überfahren schliesst bzw. öffnet. Hier der Code :

HTML: 
<body><div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

</body>

Code: 
#navlist
{
padding: 3px;
border: 1px solid #fff;
width: 12em;
background-color: #26a;
font: 12px verdana,sans-serif;
}

#navlist li
{
list-style: none;
border: 1px solid #26a;
}

#navlist a
{
color: #eee;
text-decoration: none;
display: block;
border-left: 1em solid #159;
border-bottom: 1px solid #159;
padding: 4px 8px;
}

#navlist a:hover { border-color: #124; }

#subnavlist li a
{
border: 0;
border-left: 0.8em solid #26a;
padding: 3px 4px;
margin-left: -20px;
}

Gruß Rico
 
Hi,
Hier die Seite - css.maxdesign.com.au/listamatic2/vertical09.htm -
Aber wie funktioniert es:confused:
 
Hi,

was willst du denn wissen, wie was an dem CSS-Listenmenü funktioniert?

Falls du das Ein- und Ausblenden des Submenüs beim Anklicken eines Links meinst, dann werf mal einen Blick in das JS-Tutorial Basic DHTML Menü.
 
So, ich hab mal die Vorlage des CSS-Listenmenüs mit etwas Javascript ausgestattet, damit das Submenü beim Anklicken eines Links ein- und ausgeblendet wird. ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
#navlist
{
padding: 3px;
border: 1px solid #fff;
width: 12em;
background-color: #26a;
font: 12px verdana,sans-serif;
}

#navlist li
{
list-style: none;
border: 1px solid #26a;
}

#navlist a
{
color: #eee;
text-decoration: none;
display: block;
border-left: 1em solid #159;
border-bottom: 1px solid #159;
padding: 4px 8px;
}

#navlist a:hover { border-color: #124; }

#subnavlist1 li a
{
border: 0;
border-left: 0.8em solid #26a;
padding: 3px 4px;
margin-left: -20px;
}

#subnavlist1 {
display: none;
}
-->
</style>

<script type="text/javascript">
<!--
function show(id) {
d=document;

if (d.getElementById(id).style.display == 'block')
   {
      d.getElementById(id).style.display='none';
   }
   else
   {
    d.getElementById('subnavlist1').style.display='none';
    //d.getElementById('subnavlist2').style.display='none';

    d.getElementById(id).style.display='block';
   }
}
//-->
</script>

</head>
<body>

<div id="navcontainer">
     <ul id="navlist">
         <li id="active"><a href="#" onclick="show('subnavlist1')" id="current">Item one</a>
             <ul id="subnavlist1">
                 <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
                 <li><a href="#">Subitem two</a></li>
                 <li><a href="#">Subitem three</a></li>
                 <li><a href="#">Subitem four</a></li>
             </ul>
         </li>
         <li><a href="#">Item two</a></li>
         <li><a href="#">Item three</a></li>
         <li><a href="#">Item four</a></li>
     </ul>
</div>

</body>
</html>
 
Hi,
Funktioniert prima, besteht die Möglichkeit das Menü so zu gestalten das bei wenn man mit der Maus darüberfährt das Menü zeitversetzt aufgeht und beim Verlassen zugeht? Mit den Anweisungen onMouseover/onMouseout klappt es nicht wirklich.
 
Hi
Ich teste zur Zeit mal was besser ist, aber die Variante ohne js ist wohlmöglich besser da -das vermute ich- eine eine menge Leute js auf ihrem PC deaktiviert haben.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück