Rozwijane menu w Bok

[Boshi]

Cześć, jestem nowy na waszym forum, dlatego chcę się na powitanie przywitać.

Teraz do rzeczy: ćwiczę sobie css+HTML. Napisałem stronkę z menu, ale doszedłem do wniosku, że przydało by mi się rozwijane menu na boki lub w dół.

Jak mogę to zmodernizować? Próbowałem na wiele sposobów, jedna za żadne skarby nie mogę nic wymśleć

Tak wygląda css menu

Kod:

#menu{
float:left;
background-color:black;
width:200px;  
padding:0;

border-radius:25px;
border-right:2px solid red;
margin-top:4px;


}




ul li {
border:1px solid #660000;



}



ul>li:first-child
{
  border-top:none;
  
  
}

ul li a
{
    display:block;
    font-size:1em;
    color:white;
    text-decoration:none;
    text-align:center;
    padding:2px;
    cursor:pointer;
    transition-duration:200ms;
    
    transition-timing-function:linear;
        
    }
    
    ul li a:visited{
    color:white;
    }
    ul li a:active{
     color:blue;
    }
    
    ul li a:hover{
    background-color:#800;
    margin-left:2px;
    border-radius:30px;
    box-shadow:0 0 4px 3px white ;
    }
    
a:hover{
color:white;
    }

A tak HTML

Kod:

<div id="menu">
<!-- przygotowanie menu poziomego ulozonego po lewej stronie strony-->
    <ul>
     <li><a href="index.html"><p>Strona główna</p></a></li>
     <li><a href=""><p>modele</p></a>
     <ul>
       <li><a href="index.html"><p>link1</p></a></li>
       <li><a href="index.html"><p>link2</p></a></li>
       <li><a href="index.html"><p>link3</p></a></li>
     </ul>
     </li>
     <li><a href="#"><p>galeria</p></a></li>
     <li><a href="kontakt.html"><p>kontakt</p></a></li>
    </ul>
    </div>

[Kartofelek]

<!-- przygotowanie menu poziomego ulozonego po lewej stronie strony-->
Poziomego czy pionowego?

Pamiętaj że:
[element który ma position:absolute jest pozycjonowany względem nadrzędnego elementu który ma position:relative]

Jeżeli teraz twoje LI będzie miało position relative, a LI UL miało position:absolute; left:100%; top:0 to będą się układały po rozwinięciu z boku tych LI.
czyli

Kod:

LI {position:relative;}
LI UL {position:absolute; left:100%; top:0;}

+ oczywiście:

Kod:

LI UL {display:none;}
LI:hover > UL {display:block;}

Z całą resztą sobie poradzisz

[Boshi]

Super, dzięki wielkie, oczywiście działa! Z resztą faktycznie dam sobie radę bez problemów mysle.

ps. chodziło o pionowe, błąd w zapisie

[Boshi]

Przepraszam za post pod postem, ale nie wiem czy ktoś będzie widział edycję.

Zrobiłem jednak troszkę inaczej, tzn menu wyświetlane jest pod jednym z linków. Problem jest taki, że jeżeli zjadę kursorem z submenu to natychmiast ono się zamyka, a np aby najechać na linka pod submenu, to trzeba najpierw jest zamknać a potem dopiero mozna wcisnąć. Myślałem nad przejściem, ale za cholery nie mogę go wykonać na tym sub menu aby rozwijało i zwijało się np z opóźnieniem.
Struktura HTML wygląda tak jak wcześniej.
CSS
Dodam stronę na serwerze(polecam w oprzerze/chrome na tę chwilę bo ff coś szaleje)
http://moje-testy.opx.pl/modele.html
I jeżeli może ktoś mniej więcej ocenić jak taka strona wygląda? (robiona dla siebie, pierwsza strona)

Kod:

#menu{
float:left;
background-color:black;
width:200px;  
padding:0;
border-radius:25px;
border-right:2px solid red;
margin-top:4px;

}


/*stylizacja menu*/
ul, li{
padding:0;
margin:0;
list-style-type:none;    
border-radius:30px;




}

ul{
border:1px solid #660000 ;
background: #2b2b2b; /* Old browsers */
background: -moz-linear-gradient(top,  #2b2b2b 4%, #1c1c1c 9%, #131313 16%, #131313 19%, #111111 45%, #2c2c2c 52%, #161616 68%, #161616 73%, #000000 97%, #4c4c4c 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#2b2b2b), color-stop(9%,#1c1c1c), color-stop(16%,#131313), color-stop(19%,#131313), color-stop(45%,#111111), color-stop(52%,#2c2c2c), color-stop(68%,#161616), color-stop(73%,#161616), color-stop(97%,#000000), color-stop(98%,#4c4c4c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* IE10+ */
background: linear-gradient(to bottom,  #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#4c4c4c',GradientType=0 ); /* IE6-9 */




}


li ul{
display:none;

}


li:hover ul {
display:block;
margin-top:10px;
margin-bottom:10px;
border:none;



}



li:hover ul a {
font-size:10px;
background-color:#800;
border-radius:25px;
border:2px double black;
margin:10px;
brder:none;
}

ul>li:first-child
{
  border-top:none;
  
  
}

ul li a
{
    display:block;
    font-size:1em;
    color:white;
    text-decoration:none;
    text-align:center;
    padding:2px;
    cursor:pointer;
    transition-duration:300ms;
    transition-timing-function:linear;
        
    }
    
    
    ul li a:visited{
    color:white;
    }
    ul li a:active{
     color:blue;
    }
    
    ul li a:hover{
    background-color:#800;
    margin-left:2px;
    border-radius:30px;
    box-shadow:0 0 4px 3px white ;
    color:white;
    }

[Kartofelek]

Tak nie rób. Jak chcesz zrobić tak jak w załączonej stronie (czyli menu rozwija się w dół), to lepiej zrób to z klikniem, bo będzie wygodniej.
Ogólnie lepie celuj w kliknięcia, bo któregoś dnia zaczniesz robić menuski dla telefonów i okaże się że nie masz kursora

Zrób mniej więcej tak:

JS - po kliknięciu na A sprawdzam czy tuż za nim jest lista (submenu). Jeżeli jest to do LI w którym jest ten link dodaje klasę show. Dzięki niej pokażę submenu

Kod:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('#menu a').on('click', function(e) {
   if ($(this).next('ul').lenght) {  
      e.preventDefault();
      $(this).parent().toggleClass('show');
   }
});
</script>

CSS:

Kod:

li ul {
max-height:0;
overflow:hidden;
-moz-transition:0.5s max-height
-webkit-transition:0.5s max-height
transition:0.5s max-height
}
li.show > ul {
max-height:600px;
}

No i dbaj o kod. czemu do linków A w #menu wrzuciłeś paragrafy?

[Boshi]

Jakie paragrafy? Nie bardzo rozumiem?

Jeżeli chodzi o skrypt, to działa choć wydaje mi się, że powinno to dzialąć na zasadzie klik=akcja, aktualnie wystarczy kliknąć raz w Link a menu będzie się rozwijało już po najechaniu potem na niego, a powinno być dopiero po ponownym kliknięciu. Druga sprawa, czy da się coś zaradzić na to by po zjechaniu z submenu kursorem nie zamykało się ono? (dopiero kiedy klikniemy na nadmenu) Podejrzewam, że to też skrypt w JS albo jQuery, ale osobiście nie mam pojęcia o tym języku, bardziej to już php + mysql.

Dzięki za pomoc w temacie

[Engine]

coś tak, dodatkowo masz możliwość ustawienia class="active" dla li

Kod:

<div id="menu">
<!-- przygotowanie menu poziomego ulozonego po lewej stronie strony-->
    <ul>
     <li class="active"><a href="index.html"><p>Strona główna</p></a></li>
     <li><a href="" class="dropdown-toggle"><p>modele</p></a>
     <ul>
       <li><a href="index.html"><p>link1</p></a></li>
       <li><a href="index.html"><p>link2</p></a></li>
       <li><a href="index.html"><p>link3</p></a></li>
     </ul>
     </li>
     <li><a href="#"><p>galeria</p></a></li>
     <li><a href="kontakt.html"><p>kontakt</p></a></li>
    </ul>
    </div>
<script type="text/javascript">
var menu_wrapper = function() {
      $('#menu a.dropdown-toggle').on("click", function() {
        $li = $(this).parent();
        $class = $li.attr('class').split(' ');
        
        if($.inArray('open-toggle', $class) !== -1) {
            $li.find('.sub-menu').slideUp(function() {
              $li.removeClass('open-toggle');
            });
        } else {
            $open = $li.parent().find('.open-toggle');
            $.each($open, function( key, value ) {
              if($.inArray('active', $(this).attr('class').split(' ')) == -1) {
                $(this).find('.sub-menu').slideUp(function() {
                    $(this).parent().removeClass('open-toggle');
                });
              }
            });
            $li.find('.sub-menu').slideDown(function() {
              $li.addClass('open-toggle');
            });
        }
               return false;
      });
    }
$(document).ready(function() {
     menu_wrapper();
});

[Kartofelek]

Tamto co ci podałem działa dobrze, tylko ty pewnie masz jeszcze swoje rozwijanie dla :hover.
Engine, ten twój kod nie jest za piękny.

http://jqapi.com/#p=hasClass