Navigation

buddha · 02.06.07 14:55

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-Code:

<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

Maik · 02.06.07 14:59

Hi,

wenn sich das Submenü beim Anklicken eines Links öffnen und erneuten Anklicken wieder schliessen soll, wäre Javascript erforderlich.

Ansonsten schau dir mal http://www.cssplay.co.uk/menus/vertical_slide.html an.

buddha · 02.06.07 15:23

Ist ein klasse Menü, gefällt mir. Ich habe von js allerdings keine Ahnung.
Gruß

Maik · 02.06.07 16:08

Bei dem Beispiel von Stu Nicholls kommt kein Javascript zum Einsatz.

buddha · 03.06.07 12:13

Hi,
Hier die Seite - css.maxdesign.com.au/listamatic2/vertical09.htm -
Aber wie funktioniert es

Maik · 03.06.07 12:22

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ü.

Maik · 03.06.07 12:49

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>

buddha · 03.06.07 13:52

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.

Maik · 03.06.07 14:02

Wenn das Submenü beim Überfahren (onmouseover) und Verlassen (onmouseout), und nicht beim Anklicken eines Links ein- und ausgeblendet werden soll, wäre Javascript überhaupt nicht erforderlich, wie ich es dir gestern mit Stu Nicholls' Beispiel http://www.cssplay.co.uk/menus/vertical_slide.html empfohlen hatte.

buddha · 03.06.07 14:31

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.

Maik · 03.06.07 14:40

Stimmt, diesen Aspekt sollte man nicht vernachlässigen, denn bei deaktiviertem JS funktioniert das Menü nicht mehr, und die im Submenü verlinkten Seiten sind dann nicht mehr erreichbar.

buddha · 03.06.07 15:20

Hi,
Muß noch mal fragen,kann man das Menü so gestalten das es so ähnlich wie dieses funktioniert?

Code :

#naviliste
{
list-style-type: none;
background-color: #FFFFCC;
margin-left: 0px;
}
 
#active:hover li { display: block; }
#active li { display: none; }
 
#navi
{
width: 180px;
background-color: #FFFFCC;
border: 1px gray solid;
}
 
#navi a
{
color: #666666;
background-color:  #FFFFCC;
width: 120px;
display: compact;
}
 
#navi a:visited
{
color: #0000CC;
background-color:  #FFFFCC;
}
 
#navi a:active
{
color: #FFFFFF;
background-color: #666666;
}
 
#navi a:hover
{
color: #FFFFFF;
background-color: #999999;
}

HTML-Code:

<body>
<div id="navi">
  <ul id="naviliste">
    <li id="active"><a href="#" id="current">Navigation 1</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li><a href="#">Untermen&uuml; </a></li>
        <li><a href="#">Untermen&uuml; </a></li>
        <li><a href="#">Untermen&uuml; </a></li>
      </ul>
    </li>
    <li id="active"><a href="#" id="current">Navigation 2</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li><a href="#">Untermen&uuml;</a></li>
        <li><a href="#">Untermen&uuml;</a></li>
        <li><a href="#">Untermen&uuml;</a></li>
      </ul>
    </li>
    <li id="active"><a href="#" id="current">Navigation 3</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Untermen&uuml; </a></li>
        <li><a href="#">Untermen&uuml;</a></li>
        <li><a href="#">Untermen&uuml;</a></li>
        <li><a href="#">Untermen&uuml;</a></li>
      </ul>
    </li>
    <li id="active"><a href="#" id="current">Navigation 4</a>
      <ul id="subnavlist">
        <li id="subactive"><a href="#" id="subcurrent">Untermen&uuml;</a></li>
        <li><a href="#">Untermen&uuml; </a></li>
        <li><a href="#">Untermen&uuml; </a></li>
        <li><a href="#">Untermen&uuml; </a></li>
      </ul>
    </li>
  </ul>
</div>
</body>

Gruß Rico

Maik · 03.06.07 15:24

Und wieso nimmst du nicht dieses Menü und gestaltest einfach sein Erscheinungsbild um?

Ich möchte dich aber noch darauf hinweisen, dass eine ID in einem Dokument eindeutig sein muss, d.h. sie darf darin nur einmal vergeben werden.

buddha · 03.06.07 15:30

Gute Frage

Mach erst mal Glock- mein Inetanschluß überholt sich mal wieder

chris213 · 10.10.07 12:34

Hallo,
ich habe das Menü ausprobiert, in Firefox läuft es prima, allerdings im IE6 klappt überhaupt nichts auf!
Kann mir jemand sagen, wie ich das ändern kann?

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Navigation mit SQL

Dyn Navigation mit SQL

Navigation

Navigation

E-Mail:

Abonnieren Abbestellen