Vyskakovací menu s prodlevou

Kategorie: Web

Vyskakovací menu je nabídka, která po přejetí kurzoru vyskočí a chvíli vydrží i po ztrátě kurzoru, zde je pouze HTML a CSS.

Jak vzniklo?

Během tvorby webu jsem potřeboval vyskakovací menu s prodlevou ztráty kurzoru a bez scriptů. Takové menu se dá udělat pomocí CSS, seznamů a skryté viditelnosti. Moje menu má prodlevu 0.5 sekund a obsahuje trochu mého okolního nastavení.

  • HTML5
  • CSS
  • Žádné scripty

Pro náhled se můžete podívat zde.

HTML kód:

<ul class="vyskakovaci"> 
  <li><a href="#vyskakovaci" title="vyskakovací menu">MENU</a> 
     <ul> 
       <li><a href="http://cviceni.mvecko.cz">Cvičení-Workout</a></li> 
       <li><a href="http://kixi.mvecko.cz">KiXi</a></li> 
       <li><a href="http://linux.mvecko.cz">Linux</a></li> 
       <li><a href="http://motorky.mvecko.cz">Motorky</a></li> 
       <li><a href="http://raspberry.mvecko.cz">Raspberry PI</a></li> 
     </ul> 
  </li> 
</ul>

CSS zápis:

.vyskakovaci {list-style: none; color: white;}
.vyskakovaci ul {transition:0.5s;width: 180px;position: relative; visibility: hidden;background-color:blue;}
.vyskakovaci > li {position: relative;width: 80px;height: 25px; border:2px solid grey;background-color: #dedede;}
.vyskakovaci {list-style: none; color: white;} 
.vyskakovaci ul {transition:0.5s;width: 180px;position: relative; visibility: hidden;background-color:blue;} .vyskakovaci > li {position: relative;width: 80px;height: 25px; border:2px solid grey;background-color: #dedede;} .vyskakovaci ul a{color: white; background-color: blue;} 
.vyskakovaci ul a:hover {color: yellow; background-color: blue;} 
.vyskakovaci li:hover ul, ul.vyskakovaci li.hover ul { visibility: visible;} 
.vyskakovaci li li {float: none;}