Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Wysuwane menu - maly problem z js - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Wysuwane menu - maly problem z js (/thread-wysuwane-menu-maly-problem-z-js)

Wysuwane menu - maly problem z js - grzesiek77 - 30-05-2012

Koledzy, po dodaniu js do rozwijanego menu mam taki problem, ze <li> wczytujac sie wyswietla sie mniejszej szerokosci niz zadana, a dopiero po chwili powieksza sie do wlasciwego wymiaru. Zobaczcie kod:

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  <head>
    <title>Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="menu.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
    
<noscript>
<style type="text/css">
.level-1:hover .menu-level-2 {
    display:block;
}
.level-2:hover .menu-level-3 {
    display:block;
}
</style>
</noscript>
    
  </head>
<body>

<div class="kontener">
    <div class="menu">
        <ul class="menu-level-1">
            <li class="level-1"><a href="" title="" class="menu_poziom">Menu 1</a>
                        <ul class="menu-level-2">
                    <li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 1</a></li>
                    <li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 2</a></li>
                    </ul>
                   </li>
                <li class="level-1"><a href="" title="" class="menu_poziom">Menu 2</a>
                    <ul class="menu-level-2">
                    <li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 1</a></li>
                    <li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 2</a></li>
                    </ul>
              </li>
            <li class="level-1"><a href="" title="" class="menu_poziom">Menu 3</a>
                    <ul class="menu-level-2">
                    <li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 1</a></li>
                    <li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 2</a></li>
                    </ul>
              </li>
            <li class="level-1"><a href="" title="" class="menu_poziom">Menu 4</a>
                    <ul class="menu-level-2">
                    <li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 1</a></li>
                    <li class="level-2"><a href="" title="" class="menu_poziom">Podmenu 2</a></li>
                    </ul>
              </li>
            <li class="level-1"><a href="" title="" class="menu_poziom">Menu 5</a></li>
            </ul>
    </div>
    <div class="lewa"><br/>
    Lewa</div>
    <div class="prawa"><br/>
    Prawa</div>
    <div class="stopka"><br/>
    Stopka</div>

</div>

<script type="text/javascript">
$(function(){
    function showIt(liClass){
        $(liClass).hover(
            function() {
                $('ul',this).first().slideDown()
            },
            function() {
                $('ul',this).first().slideUp()
            }
        )
    }

    showIt('.level-1')
    showIt('.level-2')
})
</script>

</body>
</html>

i css
Kod:
body {
margin: 0 auto;
background: #121212;
font-family: Arial, Helvetica;
font-size: 14px;
color: #FFFFFF;
}

.kontener {
width: 980px;
margin: 0 auto;
}

.menu {
width: 980px;
margin: 0 auto;
}

.lewa {
width: 270px;
float: left;
}

.prawa {
width: 700px;
float: right;
}

.stopka {
width: 980px;
clear: both;
}

a.menu_poziom {
display: block;
padding: 7px;
margin: 0;
background: #666666;
color: #FFFFFF;
text-decoration: none;
width: 150px;
text-align: center;
border-bottom: 1px dotted #1F1F1F;
border-right: 1px dotted #1F1F1F;
border-left: 1px dotted #1F1F1F;
}

a.menu_poziom:hover {
background: #1F1F1F;
}

ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 850px;
}    

.menu-level-1 {}

.level-1 {
position: relative;
float: left;
}

.menu-level-2 {
position: absolute;
width: 150px;
display: none;
background: url(../);
margin-top: 5px;
margin-left: -1px;
}

.level-2 {
position: relative;
top: -5px;
}

.menu-level-3 {
position: absolute;
left: 164px;
top: 0;
display: none;
}

Moge prosic o pomoc?

RE: Wysuwane menu - maly problem z js - grzesiek77 - 31-05-2012

@Kartofelek gdzie jestes Smile

RE: Wysuwane menu - maly problem z js - Kartofelek - 31-05-2012

Wystaw stronę bo nie chce mi się zgadywać. CSS w miarę dobre, co najwyżej można by dodać kilka wymiarów width