Az oldal menüje
 
Az év weboldala - 2013


Photoshop leírások

Ikonbázis
Galéria
 

 
Címkék

A blogban leggyakrabban használt címkék

 

Neko

Legördülő menük
Legördülő menük : Legördülő menü 6.

Legördülő menü 6.


Menükód

<ul class="menu cf">
        <li>
            <a href="">Menu item</a></li>
        <li>
            <a href="">Menu item</a>
            <ul class="submenu">
                <li>
                    <a href="">Submenu item</a></li>
                <li>
                    <a href="">Submenu item</a></li>
                <li>
                    <a href="">Submenu item</a></li>
                <li>
                    <a href="">Submenu item</a></li>
            </ul>
        </li>
        <li>
            <a href="">Menu item</a></li>
        <li>
            <a href="">Menu item</a></li>
    </ul>


CSS kód

 <style type="text/css">
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.menu,
.submenu {
        margin: 0;
        padding: 0;
        list-style: none;
    }
/* menü kinézete */
.menu {          
    margin: 50px auto;
    width: 590px;
    width: fit-content;   
}

.menu > li {
    background: #34495e;
    float: left;
    position: relative;
    transform: skewX(25deg);
}

.menu a {
    display: block;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: Arial, Helvetica;
    font-size: 14px;
}        

.menu li:hover {
    background: #e74c3c;
}        

.menu > li > a {
    transform: skewX(-25deg);
    padding: 1em 2em;
}

/* legördülő menü kinézete */
.submenu {
    position: absolute;
    width: 200px;
    left: 50%; margin-left: -100px;
    transform: skewX(-25deg);
    transform-origin: left top;
}

.submenu li {
    background-color: #34495e;
    position: relative;
    overflow: hidden;       
}                        

.submenu > li > a {
    padding: 1em 2em;            
}

.submenu > li::after {
    content: '';
    position: absolute;
    top: -125%;
    height: 100%;
    width: 100%;         
    box-shadow: 0 0 50px rgba(0, 0, 0, .9);           
}        

/* effektek a menünek */
.submenu > li:nth-child(odd){
    transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
    transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
    right: -50%;
    transform: skewX(-25deg) rotate(3deg);
}                

.submenu > li:nth-child(even){
    transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
    transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
    left: -50%;
    transform: skewX(25deg) rotate(3deg);
}

/* effektek a legördülő menünek */
.submenu,
.submenu li {
    opacity: 0;
    visibility: hidden;         
}

.submenu li {
    transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
    opacity: 1;
    visibility: visible;
}        

.menu > li:hover .submenu li:nth-child(even){
    transform: skewX(25deg) translateX(15px);          
}

.menu > li:hover .submenu li:nth-child(odd){
    transform: skewX(-25deg) translateX(-15px);            

}    </style>

Forrás: http://red-team-design.com/dropdown-menu-concept/

Még nincs hozzászólás.
Csak regisztrált felhasználók írhatnak hozzászólást.
 

ANEZKABLOG megnyitotta kapuit, ahol a valódi, õszinte életét, véleményét olvashatjátok el!    *****    Duguláselhárítás Debrecen    *****    Visszaszámlálás indul! A popzene 2018-as évét foglaljuk össze. Dalok, albumok, videoklipek.    *****    STAR STABLE ONLINE - R A J O N G Ó I O L D A L - Daisy Doveer - STAR STABLE ONLINE    *****    Aranysárkányok korának 617-edik esztendejében...    *****    If this is the end in fire we should burn together    *****    Keresett karakterek // Szerepjáték // Csatlakozz // Varázslat és Sárkányvér // Aneliath    *****    snowflakes in the wrong place    *****    &#9819; ANELIATH &#9737; varázslat és sárkányvér    *****    every monster was a (wo)man first    *****    Fedett lovardák,kör karámok, angol lovas bokszok, gép-takarmány tárolók gyártás,szerelését, építését vállaljuk!    *****    Meditációk az okkult életrõl    *****    SZÉP AJÁNDÉK EGY SZEMÉLYES HOROSZKÓP.SZEREZZ ÖRÖMET SZERETTEIDNEK KARÁCSONYRA,EGY SZEMÉLYISÉG ÉS SORS ANALÍZISSEL!VÁRLAK    *****    MINDIG SZÉP AJÁNDÉK EGY SZEMÉLYES HOROSZKÓP. Szerezz örömet SZERETTEIDNEK Karácsonyra egy tartalmas elemzéssel!    *****    A horoszkóp a lélek tükre, egyszer mindenkinek bele kell néznie. Tegyél egy próbát, én segítek az értelmezésben. Várlak!    *****    Rendelj szeretteidnek, asztrológiai elemzéseket, a 20-25 oldalas születési horoszkóp elõrejelzéssel,nagyon szép ajándék!    *****    Hamarosan, karácsony:rendelj, születési, elõrejelzési, párkapcsolati, fogamzási,hold horoszkópot, biotérképet ajándékba!    *****    szekelyhirdeto    *****    Te mit tennél, hogy a legnagyobb titkod, titok is maradjon?    *****    BLACK FRIDAY AKCIÓ!! Részletek ide kattintva!