Jquery rozwijane menu z listy z regulacją czasu pojawiania się po najechaniu na myszkę.

pytanie zadane 13 kwietnia 2016 w JavaScript przez pawelpawel Początkujący (480 p.)

Witam, znalazłem na YT filmik jak koleś fajnie pisze rozwijane menu w formie listy. dodaje skrypt dzięki któremu menu ma się rozwinąć płynnie,

https://www.youtube.com/watch?v=vwJ6LKIVt5Y

Cały kod z tego filmiku spisałem ale ja pisałem tylko jedną listę

pobrałem biblioteke jquery i dodałem ją do pliku w folderze mojej strony oraz podlinkowałem do html w wersji którą pobrałem(pełna wersja) tak jak widać w kodzie.

CSS mam w osobnym pliku i robiłem swoje kolory.

Gdzie ja tu robię błąd, że to mi nie działa?

Dopóki nie daje display:none; wszystko działa znakomicie a potem rozwijanie jquery nie działa

Proszę, pomóżnie! ;(

<!DOCTYPE HTML/>

<html lang=>

        <head>
        
        <meta charset="utf-8" />
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        
        <title>menu-rozwijane</title>
        

                <script type="text/javasript" src="js/jquery-1.12.3.js"></script>
        <script type="text/javasript">
        
        
$(document).ready(function(){
        $('li').hover(function() {
        $(this).find('ul>li').fadeToggle(400);
        });
        });
        
        </script>
        
        
<style type="text/css">

body
{
color: #ffffff;
background: url('bground.jpg');
background-size: 100%;
}

ul
{       
list-style: none;
background-color: grey;
width: 150px;
text-align: center;
margin: 0;
padding: 0;
}

ul:hover
{
background-color: black;
}

li a
{
text-decoration:none;
color: white;
}

li a:hover
{
color: yellow;
}

ul li li
{
background-color: white;
display: none;
}

ul li li:hover
{
background-color: brown;
}

ul li li a
{
color: green;
}

ul li li a:hover
{
color: red;
}


</style>
        </head>
        <body>

        <ul>
                <li><a href="">Services<a/>
                        <ul>
                                <li><a href="">Home<a/>
                                <li><a href="">Office<a/>
                                <li><a href="">Large areas<a/>
                                <li><a href="">Garden<a/>
                        </ul>
                </li>
        </ul>
        
        </body>
        </html>

1 odpowiedź

odpowiedź 13 kwietnia 2016 przez jaca121212 Nałogowiec (40,760 p.)

Może nie jest to taki sam efekt jak na filmie ale możesz zastosować animate.css

efekt z jego użyciem jest taki http://codepen.io/jaca121212/pen/vGROJV

komentarz 13 kwietnia 2016 przez pawelpawel Początkujący (480 p.)

Muszę źle podpinać jave czy coś, bo animatecss też nie działa.

jaca121212

Czy mógłbyś mi podesłać cały kod, razem z head, meta i wszystkimi linkami? Bo inaczej nie dam rady znaleźć błędu :/

komentarz 13 kwietnia 2016 przez jaca121212 Nałogowiec (40,760 p.)
edycja 13 kwietnia 2016 przez jaca121212

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Nazwa twojej strony</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
body
{
color: #ffffff;
background: url('bground.jpg');
background-size: 100%;
}
 
ul
{       
list-style: none;
background-color: grey;
width: 150px;
text-align: center;
margin: 0;
padding: 0;
}
 
ul:hover
{
background-color: black;
}
 
li a
{
text-decoration:none;
color: white;
}
 

 
ul li li
{
background-color: red;
  
}
 
ul li li:hover
{
background-color: brown;
}
ul li ul{
  display:none;
}

ul li:hover ul{
  display:block;

}
  

 
ul li ul li a
{
color: black;
}
 
ul li li a:hover
{
color: red;
}
</style>
</head>
<body>
 
        <ul>
                <li><a href="">Services<a/>
                        <ul>
                                <li><a href="">Home<a/>
                                <li><a href="">Office<a/>
                                <li><a href="">Large areas<a/>
                                <li><a href="">Garden<a/>
                        </ul> 
                </li>
        </ul>
         <script>
		 $(document).ready(function(){
        $('ul li').hover(function(){
       $('ul li ul').addClass('animated bounceInLeft');
       
        });
 
 });
		 </script>
        </body>
</html>

Tak to powinno wyglądać. U mnie działa u ciebie też to powinno.

Link gdyby coś z tym kodem było nie tak

http://pastebin.com/pLzs5Sa9

komentarz 13 kwietnia 2016 przez pawelpawel Początkujący (480 p.)

Poszło z kodu z pastebin. Dziękuje!

Ty podałeś linki do biblioteki, zamiast je wrzucić w pliku tak?

Czy te linki które podałeś, to ścieżki do biblioteki java i jquery, które obsługują wszystkie efekty java i jquery? czy są różne biblioteki zależnie od tego co chcemy dodać w javie/jquery?