Rozwijane menu po kliknieciu

pytanie zadane 2 listopada 2016 w HTML i CSS przez Noak Mądrala (5,900 p.)

Witam,

zrobiłem pionowe menu z jedną opcją rozwijaną. Czy jest możliwość rozwijania menu po kliknięciu (w html i css)??

Do tej pory użyłem selektory :hover i menu rozwija się po najechaniu.

 ol{
        
        padding:0;
        margin:0;
        list-style-type:none;
    }
       ul > li 
      {
        visibility:hidden;
        padding:0;
        margin:0;
        list-style-type:none;
    }
       li:hover ul >li{
           visibility:visible;
           position:relative;
       }

  <ol>
                <li class="opcja"><a href="index.html" class="link">Strona gółwna</a></li>
                <li class="opcja"><a href="Historia.html" class="link">Historia</a></li>
                <li class="opcja"><a href="Zasady.html" class="link">Zasady</a></li>
                <li class="opcja"><a href="System rankingowy.html" class="link">System rankingowy</a></li>
                <li class="opcja">Sławni szachiści
                
                    <ul>
                        <li><div class="opcja"><a href="Sławni szachiści.html" class="link">Sławni szachiści</a></div></li>
                        <li><div class="opcja"><a href="Sławni szachiści.html" class="link">Sławni szachiści</a></div></li>

                    </ul>
                
                
                
                </li>


                <li><div class="opcja"><a href="Kontakt.html" class="link">Kontakt</a></div></li> 
            </ol>

2 odpowiedzi

odpowiedź 2 listopada 2016 przez pablop76 VIP (123,540 p.)
wybrane 2 listopada 2016 przez Noak

Najlepsza

Można urzyć pseudoklasy :target

http://stackoverflow.com/questions/27267807/drop-down-menu-using-css-target-pseudo

komentarz 2 listopada 2016 przez Noak Mądrala (5,900 p.)

Jeśli zamienię :hover na :target to niestety nie działa :(

komentarz 2 listopada 2016 przez pablop76 VIP (123,540 p.)

Za pomocą tego selektora określamy wygląd elementu stanowiącego etykietę, do której przenieśliśmy się po przez kliknięcie w element a prowadzący do danej etykiety.

Twój kod może wyglądać np: tak

<ol id="menu">
     <li class="opcja"><a href="index.html" class="link">Strona gółwna</a></li>
     <li class="opcja"><a href="Historia.html" class="link">Historia</a></li>
     <li class="opcja"><a href="Zasady.html" class="link">Zasady</a></li>
     <li class="opcja"><a href="System rankingowy.html" class="link">System rankingowy</a></li>
     <li class="opcja"><a href="#target">Sławni szachiści</a>             
          <ul class="menu" id="target">
               <li><div class="opcja"><a href="Sławni szachiści.html" class="link">Sławni szachiści</a></div></li>
               <li><div class="opcja"><a href="Sławni szachiści.html" class="link">Sławni szachiści</a></div></li>
		</ul>                            
     </li>
     <li><div class="opcja"><a href="Kontakt.html" class="link">Kontakt</a></div></li> 
</ol>

ol{      
    padding:0;
    margin:0;
	list-style-type:none;
}
ul > li{
     padding:0;
    margin:0;
	list-style-type:none;
}
.menu{
	display: none;
}
#menu ul:target{
	display: block;
}

odpowiedź 2 listopada 2016 przez zgrybus Pasjonat (24,860 p.)

Można, również przez JS.

Dajesz <li> height: 0px; i overflow hidden; a po kliknieciu na <ul>, <li> dostaje height: 250;

Do głównej klasy <li> dodajesz transition: height czas[s] [jak ma przechodzić w czasie np. linear];

komentarz 2 listopada 2016 przez Filip2248 Dyskutant (8,840 p.)

No ale właśnie o to chodzi, że on chce przez html i css (nie js).

komentarz 2 listopada 2016 przez Noak Mądrala (5,900 p.)

Tak to musi być w css i html gdyż tylko tych języków mogę używać przy projekcie.

komentarz 2 listopada 2016 przez zgrybus Pasjonat (24,860 p.)

a przepraszam, nie doczytałem :P

komentarz 2 listopada 2016 przez zgrybus Pasjonat (24,860 p.)

Jeśli Ci to pomoże, że doczytałem, że można przez checkbox'a ( lekko go podmienić ). Ogólnie nie ma pseudoklasy, która by definiowała "kliknięcie"

http://stackoverflow.com/questions/6019845/show-hide-div-on-click-with-css