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

onmouseover showSub

D

devilseye

Neues Mitglied
hallo hab mal wieder n kleines problem. ich möchte, das wenn ich über den Link im Container navigation fahre, im Container submenus ein untermenü aufgeht und das dann auch dort sichtbarbleibt bis ich über einen anderen Link im navigations Container fahre.
Ausserdem hab ich das Problem das wenn ich über einen navigations Link fahre (ul li a:hover) dass dann der hover effekt über die hr hinausgeht was ja nicht sein sollte.
danke schon im voraus.

Hier mein Code
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><a href="test1.html" title="Home"><img align="middle" src="bilder/CSM_Logo_style2.png" height="170" width="700" border="none" /></a></div>
<hr />
<!--menu-->
<div class="wrapper">
    <div id="navigation">
        <ul class="innen">
            <li><span class="navlink"><a href="test1.html" onmouseover="showSub('sub0')" title="Home"><font>Home</font></a></span></li>
            <li><span class="navlink"><a href="#" onmouseover="showSub('sub1')" title="Möbel"><font>Möbel</font></a></span></li>    
            <li><span class="navlink"><a href="#" onmouseover="showSub('sub2')" title="Kantakt"><font>Kontakt</font></a></span></li>
            <li><span class="navlink"><a href="#" onmouseover="showSub('sub3')" title="Geschichte"><font>History</font></a></span></li>
        </ul>
    </div>
    <div id="submenus">
    <div id="sub0" class="submenu"></div>
        <div id="sub1" class="submenu">
            <ul class="innen">
                <li>hmm</li>
            </ul>
        </div>
        <div id="sub2" class="submenu">
            <ul class="innen">
                <li>get wicked</li>
            </ul>
        </div>
        <div id="sub3" class="submenu"></div>
    </div>
    <hr />
</div>
<!--End menu-->
<div class="wrapper">
<div id="sidebar">
    <font>hallo</font>
</div>
<div id="main">
    <font>hallo</font>
</div>
<hr />
<div id="footer">
    <font>footer</font>
</div>
</div>
</body>
</html>
CSS datei

HTML: 
@charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    padding:0px;
}
body {
    background-image:url(bilder/CSM_Background.png);
    color:#F00;
    text-align:center;
}
font{
    font:"Arial Black", Gadget, sans-serif;
    font-weight:bold;
    font-size:18px;
}
hr {
    background-color:#F00;
    height:2px;
    border:none;
}
a{
    text-decoration:none;
    color:#F00;
    padding:10px 50px;
}
ul li a:hover{
    height:50px;
    background-color:#F00;
    color:#000;
    cursor:crosshair;
}
.navlink a, .navlink a:active, .navlink a:visited {
    font:"Arial Black", Gadget, sans-serif;
    color:#F00;
    text-decoration:none;
    font-weight: bold;
}
.navlink a:hover {
    font:"Arial Black", Gadget, sans-serif;
    color:#000;
    text-decoration:none;
    font-weight: bold;
}
.submenu {
    border:none;
    width:840px;
    display:none;
    height:50px;
    padding-top:3px;
    padding-left:20px;
    position:relative;
}
.submenu a {
    color:#F00 !important;
    padding-left:10px;
    padding-right:5px;
}
.submenu a:hover {
    color:#000 !important;
    text-decoration :none;
}
h1{
    font-size:72px;
}
ul{
    padding:0px 100px;
    list-style:none;
    float:left;
}
li{
    float:left;
    padding:0px;
}
ul .innen{
    float:left;
    padding:0px;
}
#navigation {
    float:left;
    padding:0px;
    height:auto;
    width:100%
}
.wrapper {
    width:100%;
    height:auto;
    float:right;
}
#sidebar {
    float:left;
}
#footer {
    clear:both;
}
#submenus {
    height:50px;
    width:100%;
}
So siehts bis jetzt aus
Custom-SM-Möbel.png
kann mir jemand helfen?

MFG devilseye
 
Zuletzt bearbeitet:
Code: 
font:"Arial Black", Gadget, sans-serif;

Das muss font-family heißen.

Ich fand es übersichtlicher, ein Beispiel neu zu schreiben. Der Code ist nicht besonders elegant, aber müsste den Job erledigen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

/**
 * new clearfix
 *
 * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
 */
.clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clear             { zoom: 1; } /* IE6 */
*:first-child+html .clear { zoom: 1; } /* IE7 */

ul, li { margin: 0; padding: 0; }

.submenu {
    display: none;
}

#navigation .innen {
    background: #0c0;
}

#navigation .innen li {
    list-style: none;
    float: left;
}

#navigation .innen a {
    font-family:"Arial Black", Gadget, sans-serif;
    color:#F00;
    padding: 10px 50px;
    text-decoration:none;
    font-weight: bold;
    display: block;
}

#navigation .innen a:hover {
    color:#000;
    background: #c00;
}

.submenu {
    background: #00c;
}

.submenu li {
    list-style: none;
    float: left;
}

.submenu li a {
    background: #eee;
    color:#F00;
    padding: 5px;
    text-decoration:none;
    font-weight: bold;
    display: block;
}

</style>
<script type="text/javascript">
function showSub(id)
{
    var numberOfSubMenus = 4,
        i = 0,
        elem = null;

    for (i = 0; i < numberOfSubMenus; i++) {
        elem = document.getElementById('sub' + i);

        if ('sub' + i == id) {
            elem.style.display = 'block';
        } else {
            elem.style.display = 'none';
        }
    }
}
</script>
</head>

<body>
    <div id="navigation">
        <ul class="innen clear">
            <li><a href="test1.html" onmouseover="showSub('sub0');" title="Home">Home</a></li>
            <li><a href="#" onmouseover="showSub('sub1');" title="Möbel">Möbel</a></li>
            <li><a href="#" onmouseover="showSub('sub2');" title="Kantakt">Kontakt</a></li>
            <li><a href="#" onmouseover="showSub('sub3');" title="Geschichte">History</a></li>
        </ul>
    </div>
        <div id="sub0" class="submenu clear">
            <ul class="innen">
                <li><a href="#">sub0</a></li>
            </ul>
        </div>
        <div id="sub1" class="submenu clear">
            <ul class="innen">
                <li><a href="#">sub1</a></li>
            </ul>
        </div>
        <div id="sub2" class="submenu clear">
            <ul class="innen">
                <li><a href="#">sub2</a></li>
            </ul>
        </div>
        <div id="sub3" class="submenu clear">
            <ul class="innen">
                <li><a href="#">sub3</a></li>
            </ul>
        </div>
    <hr />

</body>
</html>
 
wow danke vielmals. Eine Frage hab ich noch kann ich dem submenu auch eine fixe höhe geben damit der Leere Container schon sichtbar ist und dann nur noch die menus eingefügt werden beim hover über die innen clear links?

MFG devilseye
 
Du kannst um die Gruppe der '<div id="sub0" class="submenu clear">'-Elemente noch ein Rahmen-div legen, dem du eine feste Höhe gibst (zum Beispiel 50 px).

Entsprechende Anpassung für Höhe des Submenüs:

Code: 
.submenu li a{
    /* ... */
    padding: 0 5px;
    height: 50px;
    line-height: 50px;
}

Außerdem solltest du überlegen, ob alle Navigationseinträge auch bei deaktiviertem JavaScript erreichbar sind. Das habe ich hier der Einfachheit halber nicht berücksichtigt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben