Navaigation erstellen wie bei minardi.it

N

Neverdom

Aktives Mitglied
Hallo
ich habe ein kleines Problem ich möchte eine Navigation erstellen wie bei
minardi.it
aber ich weis nicht wie das geht
ich hoffe ihr könnt mir helfen

MFG
Salvo
 
Ich würde allerdings darauf achten, dass der Mauszeiger bei mouseover zu einer "Hand" wird. Kann den Nutzer verwirren, so wies jetzt ist.

Gruss Sandro
 
Ausserdem hat man unter Firefox bei solchen Menu's riesen Probleme weil Flash sich immer in den Vordergrund drängt...Schau Dir mal die minardi site mit Firefox an, dann siehst Du was ich meine
 
<HEAD>


CODE <script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

-->
</style>


</HEAD><BODY>


CODE

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="http://www.xxxweb.biz" title="STARSEITE">HOME</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>

</ul>
</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Menu 4.1</a></li>
<li><a href="#">Menu 4.2</a></li>

</ul>
</dd>
</dl>

</div>


 
Ich habe da auch etwas. Lädt zum Spielen ein und funktioniert nicht schlecht.
Mit besten Grüssen
Boubou7

PS: Du kannst natürlich den ganzen Style-Kram auch in ein Style-Sheet verpacken, aber zum spielen ist's nicht schlecht.

QUOTE <html>
<head>

<style type="text/css">

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 1px solid black;
border-left-width: 0;
background-color: #D8FE89;
}

.headerlinks a{
margin: auto 8px;
font-weight: bold;
color: black;
}

.submenus{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #EEFFCC;
border: 1px solid black;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: yellow;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type="text/javascript">

// CSS Top Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// Adopted from SuckerFish menu
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Please keep this credit intact

startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>

</head>
<body>

<ul id="csstopmenu">

<li class="mainitems" style="border-left-width: 1px">
<div class="headerlinks"><a href="http://www.javascriptkit.com">JavaScript Kit</a></div>
<ul class="submenus">
<li><a href="http://javascriptkit.com/">Home</a></li>
<li><a href="http://javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
<li><a href="http://javascriptkit.com/javaindex.shtml">JavaScript tutorials</a></li>
<li><a href="http://javascriptkit.com/jsref/index.shtml">JavaScript Reference</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">2nd Menu Item</a></div>
<ul class="submenus" style="width: 14em">
<li><a href="">Sub 2 Item 1. Long text, long menu.</a></li>
<li><a href="">Sub 2 Item 2</a></li>
<li><a href="">Sub 2 Item 3.</a></li>
</ul>
</li>

<li class="mainitems">
<div class="headerlinks"><a href="http://www.javascriptkit.com">3rd Menu Item</a></div>
<ul class="submenus">
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
<li><a href="">Sub 3 Item 1</a></li>
</ul>
</li>

</ul>

<div id="clearmenu" style="clear: left"></div>


</body>
</html>
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben