Antworten auf deine Fragen:
Neues Thema erstellen

Drop Down ohne javascript

elo63

Nicht mehr ganz neu hier

Hallo,

bin gerade dabei eine navigation zu machen war soweit fertig als ich feststellte das ich bei einen menuepunkt ein dropdown brauche.

Also sieht es z.B. aus

Home Anfahrt Preise Team Imressum

jetzt möchte ich das der Menüpunkt Team ein dropdown aufmacht mit 2 Eintägen (Menüpunkte), muss so sein.

Habe gegoogelt und rumexperimentiert aber es letzlich nicht richtig hinbekommen, es soll nur mit HTML 5 und CSS3 gemacht werden.

Jann mir jemand helfen oder kennt jemand eine Anleitung, habe das mit drpdown noch nicht gemacht.

mfg

elo63
 

elo63

Nicht mehr ganz neu hier

Hallo,

danke erstmal habe jetzt alles hinbekommen. leider bekomme ich nocht hin wie man den zur Zeit aktive angeklickten Menupunkt hervorheben kann da die Menüpunkte so aufgebaut sind.
<li class="topmenu"><a href="index.html">Willkommen</a></li>
<li class="topmenu"><a href="wir.html">Wir über uns</a></li>
<li class="topmenu"><a href="impressum.html">Impressu</a></li>
usw.

Oder kann man es dann auch so machen mit einer zusätzlichen ID
<li class="topmenu" id="navi01"><a href="index.html">Willkommen</a></li>
<li class="topmenu" id="navi02"><a href="wir.html">Wir über uns</a></li>
<li class="topmenu" id="navi03"><a href="impressum.html">Impressu</a></li>

nur wie spreche ich die in CSS an.

mfg

elo63
 

photoman

Nicht mehr ganz neu hier

kannst einfach immer dem aktiven menüpunkt die klasse active geben und dann kannst du im css die klasse active definieren
 

lachender_engel

Aktives Mitglied

Du musst das dynamisch machen und mit PHP eine Abfrage einbauen anhand Du testest ob ein Menüpunkt der aktuellen Seite entspricht und ergänzt dann den class-Tag um z.B. die Klasse aktive.
Kannst Du PHP programmieren?
Stellt Dein Server PHP bereit?
 

elo63

Nicht mehr ganz neu hier

Hallo,

erstmal danke, das sollte schon ohne PHP sein, ging vorher auch nur jetzt hatte ich das drop down Menü eingebaut.

Also wäre der Link so richtig

<li class="topmenu" "active"><a href="index.html">Willkommen</a></li>

mfg

elo63
 

elo63

Nicht mehr ganz neu hier

Hallo,

hier mal das HTML für die navi.

<nav>
<ul>
<li class="topmenu" "active"><a href="index.html">Willkommen</a></li>
<li class="topmenu"><a href="kneipe.html">PKneipe</a></li>
<li class="topmenu"><a href="anfahrt.html">Anfahrt</a></li>
<li class="topmenu"><a href="team.html">Team</a>
<ul>
<li class="submenu"><a href="games.html">Games</a></li>
<li class="submenu"><a href="spiele.html">Spiel</a></li>
</ul>
<li class="topmenu"><a href="leistungen.html">Leistungen</a></li>
<li class="topmenu"><a href="kontakt.html">Kontakt</a></li>
<li class="topmenu"><a href="impressum.html">Impressum</a></li>
</ul>
</nav>

Aber wenn ich diese erste ansprechen will in CSS geht es nicht
<li class="topmenu" "active"><a href="index.html">Willkommen</a></li>

Z.B.
nav li.active a {
color: black; /* Schriftfarbe */
background-color: #73A7CE; /* Farbe des angeklickten Links '/
}

oder so auch nicht

nav ul li.active a {
color: black; /* Schriftfarbe */
background-color: #73A7CE; /* Farbe des angeklickten Links '/
}

was mache ich falsch

mfg

elo63
 

Aelfry

Web Developer

Aber wenn ich diese erste ansprechen will in CSS geht es nicht
<li class="topmenu" "active"><a href="index.html">Willkommen</a></li>
Du musst den Klassennamen schon ins Klassen Attribut schreiben.
Da dürfen mehr als ein Name stehen ;)
HTML:
<li class="topmenu active"><a href="index.html">Willkommen</a></li>
 

elo63

Nicht mehr ganz neu hier

Hallo,

wiedermal danke erstmal.

also so:
<nav>
<ul>
<li class="topmenu aktuell"><a href="index.html">Willkommen</a></li>
<li class="topmenu"><a href="kneipe.html">PKneipe</a></li>
<li class="topmenu"><a href="anfahrt.html">Anfahrt</a></li>
<li class="topmenu"><a href="team.html">Team</a>
<ul>
<li class="submenu"><a href="games.html">Games</a></li>
<li class="submenu"><a href="spiele.html">Spiel</a></li>
</ul>
<li class="topmenu"><a href="leistungen.html">Leistungen</a></li>
<li class="topmenu"><a href="kontakt.html">Kontakt</a></li>
<li class="topmenu"><a href="impressum.html">Impressum</a></li>
</ul>
</nav>

und css so:

nav li.aktuell a {
color: black; /* Schriftfarbe */
background-color: #73A7CE; /* Farbe des angeklickten Links '/
}

geht aber nicht sorry.

elo63
 

elo63

Nicht mehr ganz neu hier

Hallo so habe jetzt es nochmal getestet, und wenn ich alle css befehle die ich bisher hatte wegnehme dann geht es, aber das ist nicht sinn der sache.

Hier das navi css:



nav ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}

nav li.topmenu {
float:left;
}

.topmenu a {
float:left;
width:110px;
text-align:center;
}

.topmenu ul{
display:none;
}

.topmenu a, .submenu a{
padding: 1px 5px; /* Abstände */
border: 1px solid #DBDBEA; /* Rahmengrösse und Farbe */
border-collapse: collapse; /* Rahmen */
color: black; /* Schriftfarbe */
text-decoration: none; /* Unterstreichung entfernen */
background-color: #73A7CE; /* Hintergrundfarbe Navi */
margin: 0;
}

.submenu a{
font-size:12px;
width:110px;
position:relative;
clear:both; /* special IE6 */
}

nav a:hover, .topmenu.on a {
color: black; /* Schriftfarbe Navi beim drüberfahren */
background-color:#C6DBEA !important; /* Hintergrundfarbe Navi beim drüberfahren */
}

.topmenu:hover ul {
display:block;
z-index:500;
}


egal wo ich auch das mit den aktuell einfüge, es geht dann zusammen nicht.

nav li.aktuell a {
color: black; /* Schriftfarbe */
background-color: #73A7CE; /* Farbe des angeklickten Links '/
}

was kann das sein.

mfg

elo63
 

photoman

Nicht mehr ganz neu hier

nimm mal eine andere Farbe bei der Klasse aktuell. Das ist die gleiche Farbe die du vorher schon als background-color definiert hast.
 

elo63

Nicht mehr ganz neu hier

Hallo,
danke aber habe das schon ghemacht war wohl ein versehen beim einfügen.

Es geht auch aber nur wenn wie geschrieben alle anderen css befehle gelöscht werden dann geht es merkwürdigerweise.

mfg
elo63
 

elo63

Nicht mehr ganz neu hier

Hallo,

also anders gefragt, wie bekomme ich bei dieser navi

<nav>
<ul>
<li class="topmenu aktuell"><a href="index.html">Willkommen</a></li>
<li class="topmenu"><a href="kneipe.html">PKneipe</a></li>
<li class="topmenu"><a href="anfahrt.html">Anfahrt</a></li>
<li class="topmenu"><a href="team.html">Team</a>
<ul>
<li class="submenu"><a href="games.html">Games</a></li>
<li class="submenu"><a href="spiele.html">Spiel</a></li>
</ul>
<li class="topmenu"><a href="leistungen.html">Leistungen</a></li>
<li class="topmenu"><a href="kontakt.html">Kontakt</a></li>
<li class="topmenu"><a href="impressum.html">Impressum</a></li>
</ul>
</nav>



und diesem CSS

nav ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}

nav li.topmenu {
float:left;
}

.topmenu a {
float:left;
width:110px;
text-align:center;
}

.topmenu ul{
display:none;
}

.topmenu a, .submenu a{
padding: 1px 5px; /* Abstände */
border: 1px solid #DBDBEA; /* Rahmengrösse und Farbe */
border-collapse: collapse; /* Rahmen */
color: black; /* Schriftfarbe */
text-decoration: none; /* Unterstreichung entfernen */
background-color: #73A7CE; /* Hintergrundfarbe Navi */
margin: 0;
}

.submenu a{
font-size:12px;
width:110px;
position:relative;
clear:both; /* special IE6 */
}

nav a:hover, .topmenu.on a {
color: black; /* Schriftfarbe Navi beim drüberfahren */
background-color:#C6DBEA !important; /* Hintergrundfarbe Navi beim drüberfahren */
}

.topmenu:hover ul {
display:block;
z-index:500;
}

eine markierung für die aktuelle Seite in der Navigation hin, drehe gleich ab.

mfg

elo63
 

elo63

Nicht mehr ganz neu hier

Hallo photoman,

das mit den geschlossennen ntag hat sich erledigt fehler gefunden.

mfg
elo63

PS aber das mit der aktuellen seite markieren geht nicht.
 
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
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben