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

Kann mir jemand bei Helfen???

T

Tim Lorens

Mitglied
Hallo

Ich versuche gerade ohne JS oder JQuery oder so ein Dropdown menu
zu machen bisher habe ich das:

HTML: 
<ul class="navimenu" >
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a>
    <ul class="navimenudropdown">
    <li><a href="#">Help 1</a></li>
    <li><a href="#">Help 2</a></li>
    </ul>
    </li>
    <li><a href="#">Exit</a></li>
</ul>
Blos weiß ich jetzt ich was ich als CSS da hin machen muss
damit das Funktioniert.

Kann mir jemand den Code erstellen.
In Google sind mir die ergebnisse
zu kompliziert

Danke
 
Zuletzt bearbeitet:
Hallo Lorens, im Prinzip geht das so:

Stylesheet:
Code: 
.navimenu li	{
	display:inline;
}
	.navimenu .navimenudropdown	{
		position:relative;
	}
		.navimenu .navimenudropdown .drop-menu	{
			display:none;
			position:absolute;
			border:1px solid black;
			top:22px;
			left:10px;
			width:50px;
		}
		.navimenudropdown:hover .drop-menu 	{
			display:block;
		}


HTML
Code: 
<ul class="navimenu" >
    <li><a href="#">Home</a></li>
    <li class="navimenudropdown">
		<a href="#">Help</a>
			<div class="drop-menu">
				<a href="#">Help 1</a>
				<a href="#">Help 2</a>
			</div>
    </li>
    <li><a href="#">Exit</a></li>
</ul>

Das Klappmenü wird ausgeblendet (display:none) und wenn man über das li mit der Klasse navimenudropdown fährt (hover)
wird das innere Klappmenü auf display:block; gestellt.
Damit das Klappmenü unter der Navigation ist wird es absolut positioniert und das Elternelement relativ.

ps: Sry für das Einbinden von Code bin ich wohl zu blöd - ich arbeite drann
 
Zuletzt bearbeitet:
Du meinst ein Dropdown mit Effekt? Soweit ich weis ist ein Dropdown-Effekt ohne Javascript und nur mit CSS sonst nicht möglich.
 
Zuletzt bearbeitet:
Marv schrieb:
Hallo Lorens, im Prinzip geht das so:

Stylesheet:
Code: 
.navimenu li	{
	display:inline;
}
	.navimenu .navimenudropdown	{
		position:relative;
	}
		.navimenu .navimenudropdown .drop-menu	{
			display:none;
			position:absolute;
			border:1px solid black;
			top:22px;
			left:10px;
			width:50px;
		}
		.navimenudropdown:hover .drop-menu 	{
			display:block;
		}


HTML
Code: 
<ul class="navimenu" >
    <li><a href="#">Home</a></li>
    <li class="navimenudropdown">
		<a href="#">Help</a>
			<div class="drop-menu">
				<a href="#">Help 1</a>
				<a href="#">Help 2</a>
			</div>
    </li>
    <li><a href="#">Exit</a></li>
</ul>

Das Klappmenü wird ausgeblendet (display:none) und wenn man über das li mit der Klasse navimenudropdown fährt (hover)
wird das innere Klappmenü auf display:block; gestellt.
Damit das Klappmenü unter der Navigation ist wird es absolut positioniert und das Elternelement relativ.

ps: Sry für das Einbinden von Code bin ich wohl zu blöd - ich arbeite drann
Zum Vergrößern anklicken....

zu dem fuktioniert der Effekt leider immer noch nicht
 
So es geht ohne JS:

HTML: 
<html>
<head>
<title>Hover Menu</title>
<style type="text/css">
#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}

#navManu ul li a {
text-algin:center;
font-family:"Comin Sans MS", cursive;
text-decoration:none;
height:30px;
width:300px;
display:block;
color:#FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}

#navMenu ul li:hover ul {
visibility:visible;

}

/********************************/

#navMenu li:hover {
background:#09F;
}

#navMenu ul li:hover ul li a:hover {
background:#CCC;
color:#000;

#navMenu a:hover {
color:#000;
}

.clearFloat {
celar:both;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>
<li><a href="#">Menu Item</a></li>

</ul>
</li>
</ul>
<br class="clearFloat" />
</div>
</div>
</body>
</html>
 
Gut, dass es damit funktioniert. Meine Lösung war allerdings genau die selbe, allerdings halt nur beim Menüpunkt "Help" angewandt. Allerdings bin ich davon ausgegangen, dass du nach einer Dropdown Animation, wie ein Aussliden des Untermenüs gesucht hast und habe diese fälschlicherweise als Effekt bezeichnet, sorry.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben