Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Navi zum Dropdown-Menu erweitern aber wie?“

Newbie123

Noch nicht viel geschrieben

Hallo ich baue immer noch an meiner Seite rum und habe eine horizontales Leisten Menü(Navi), nun möchte ein Dropdown draus machen nur leider gelingt es mir nicht so recht.Ich habe schon probiert aus einem anderen Template das Dropdownmenü zu übertragen, aber ohne Erfolg.Hier mal ein Auszug aus dem externen CSS-Sheet:

Code:
/* navigation menu */
#menu
{ height: 42px;
  width: 760px;
}
#menu ul{margin: 0px auto;} 
#menu li
{ float: left; 
  margin: 0px; 
  padding: 0px;
  list-style: none;
} 
#menu li a 
{ display: block; 
  float: left; 
  height: 37px;
  text-decoration: none; 
  padding: 3px 19px 2px 19px;
  text-transform: uppercase;
}

Kann mir jemand aufschreiben wie ich den Code ergänzen muss, damit ich das Menü mit Untermenüpunkten ala "Dropdown" versehen kann?
Wäre sehr nett!

MfG Newbie123
 

Ammersee

Laborant

AW: Navi zum Dropdown-Menu erweitern aber wie?

Grüß dich,

würde dir gerne helfen bräuchte aber noch den html code sonst kann ich damit recht wenig anfangen achja und wenn du mal hier bei stu nichols reinschaust
der hats drauf und dann einfach quellcode anschauen und die gewünschte navi anschauen und nachbauen.


Grüße Ammersee
 

Newbie123

Noch nicht viel geschrieben

AW: Navi zum Dropdown-Menu erweitern aber wie?

Ja die Seite kenn ich schon.Hier mal der HTML Teil des Menu (Navi)

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Elektro-Stepi</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <!-- **** layout stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="style/style.css" />
  <!-- **** colour scheme stylesheet **** -->
  <link rel="stylesheet" type="text/css" href="style/orange.css" />
 
 
  <style type="text/css">
<!--
.Stil2 { font-size: 14px;
 margin: 0px;
}
.Stil4 { font-size: 16px;
 font-weight: bold;
 margin: 5px;
}
.Stil6 { font-size: 14px;
 font-weight: bold;
 margin: 5px;
}
-->
  </style>
</head>
<body>
  <div id="main">
    <div id="links"></div>
    <div id="logo"></div>
    <div id="menu">
 
        <ul>
        <li><a id="selected" href="index.html">home</a></li>       
        <li><a href="#">Grundwissen</a></li>       
        <li><a href="#">Projekte</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="http://elektro-stepi.de/tinc?key=YB2WBTrN&amp;start=-1&amp;reverse=1">G&Auml;stebuch</a></li>
        <li><a href="#">Impressum/Kontakt</a></li>
        </ul>
    </div>
Würde mich freuen wenns klappt mit dem Dropdown.
MfG Newbie123
 

dosonaro

Aktives Mitglied

AW: Navi zum Dropdown-Menu erweitern aber wie?



Hier eine Dropdown Navigation per CSS, du findest 1000 Tutorials im Internet, solltest du nicht zu faul sein um Google zu nutzen.
 

Newbie123

Noch nicht viel geschrieben

AW: Navi zum Dropdown-Menu erweitern aber wie?

Hallo Jungs und Mädels.So langsam aber sicher komme ich zum Ziel.Das Dropdown ist fast fertig, und es fehlt nur noch ein bissl Feinschliff.Ein paar Problem müssen noch beseitigt werden.Hier mal der Code.

CSS

Code:
/* Menu-Navigation */
#menu
{ height: 42px;
  width: 760px;
}
#menu ul{margin: 0px auto;} 
#menu li
{ float: left; 
  margin: 0px; 
  padding: 0px;
  list-style: none;
} 
#menu li a 
{ display: block; 
  float: left; 
  height: 37px;
  text-decoration: none; 
  padding: 3px 19px 2px 19px;
  text-transform: uppercase;
} 
#menu li ul.menu2 {
 margin:0px;
 padding:0px;
 list-style:none;
 display:none;
 width:146px;
 position:absolute;
 top:178px;
 left:480px;
 
}
#menu li:hover ul.menu2 {
 display:block;
}
#menu li ul.menu2 li {
 width:146px;
 clear:left;
 width:146px;
}


HTML

HTML:
<div id="menu">
 
                <ul>
        <li><a id="selected" href="index.html">home</a></li>       
        <li><a href="#">Grundwissen</a></li>       
        <ul class="menu2">
        <li><a href="#">Kondensator</a></li>
        <li><a href="#">Widerstand</a></li>
        <li><a href="#">Diode</a></li>
        <li><a href="#">Transistor</a></li>
        <li><a href="#">Platine</a></li>
        <li><a href="#">PIC</a></li>
        <li><a href="#">Werkzeuge</a></li>
        </ul>
        <li><a href="#">Projekte</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="http://elektro-stepi.de/tinc?key=YB2WBTrN&amp;start=-1&amp;reverse=1">G&Auml;stebuch</a></li>
        <li><a href="#">Impressum/Kontakt</a></li>
        </ul>
    </div>

Nun meine Fragen dazu!
1.Problem: die entstehenden Dropdownboxen haben alle eine unterschiedliche Länge je nachdem wie viele Buchstaben das Wort"Link" hat was drin steht.Wie passe ich das an das sie alle die gleiche Länge haben?

2.Problem:beim überprüfen der Seite im HTML bzw.XHTML Teil, sagt DW-CS3 der ul-Tag ist in ul nicht zulässig. Wie ändere ich das ab das der Fehler verschwindet?

MfG Newbie123


Edit: Habe grade mit erschrecken festgestellt das die Dropdown im Mozilla,Opera,Netscape,SeaMonkey nicht funktioniert...!Ich verzweifel noch an dem sch... Teil. Edit-Ende
 
Zuletzt bearbeitet:

xXxDemoxXx

"Spielkind" o.O

AW: Navi zum Dropdown-Menu erweitern aber wie?

Sry, aber dafür will ich keinen extra Thread aufmachen ^^
Wofür steht <li> ? Was bezweckt das?
 

Newbie123

Noch nicht viel geschrieben

AW: Navi zum Dropdown-Menu erweitern aber wie?

Hallo li steht für eine ungeordnete oder geordnete Liste bzw. Aufzählung,Auflistung warum fragst du das?

Mfg Newbie
 
L

Loilo

Guest

AW: Navi zum Dropdown-Menu erweitern aber wie?

Sry, aber dafür will ich keinen extra Thread aufmachen ^^
Wofür steht <li> ? Was bezweckt das?

Menüs werden mit modernem CSS oft in Listen dargestellt, <li> ... </li> stellt einen Menüpunkt einer Liste dar.

Das ist vor allem für CSS-unfähige Browser sehr sinnvoll. Da in Menüs Hyperlinks meist per CSS auf display:block; gesetzt werden (also kein <br />-Tag zum Umbruch nötig ist), werden die Links bei Ignorierung von CSS alle nebeneinander angezeigt. Das ist unübersichtlich und benutzerunfreundlich. Außerdem werden Menüs mit Listen wunderbar strukturiert / hierarchisch dargestellt.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.156
Beiträge
2.581.859
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben