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.
 

Nem lehet saját lovad? Nevelj virtuálisan ITT! Nevelj, versenyezz, licitálj szebbnél szebb lovakra!    *****    -Portálépítés és portáldíszítés kezdõknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Naptár,Design!-    *****    The Resident - A kórházi drámasorozat január 21-én indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!    *****    Mindenféle kérdésedre õszinte választ kaphatsz a valódi Kérdõasztrológia segítségével.    *****    Részletes személyiség és sors analízis / születési horoszkóp / ajándék 3 év elõrejelzéssel. Most érdemes ide látogatni!!    *****    Ha diplomás asztrológust keresel, aki BECSÜLET KASSZÁS alapon ad tanácsot és INGYEN OKTAT, akkor keress bizalommal!    *****    A BIOTÉRKÉP AZ IGAZI KARMA! MEGMUTATJA PONTOSAN,MILYEN FELADATTAL SZÜLETTÉL.EGY PRÓBÁT MEGÉR. SOK SEGÍTSÉG MINDEN NAP!!!    *****    Megnyitott a madárvendéglõ! Gyertek vendégségbe ti is Mályvához és Pipitérhez! Irány a Mesetár!    *****    Megnyitottam cikkes, véleményes blogomat! Sok-sok érdekes bejegyzéssel várlak naponta, ne hagyd ki! - Alice    *****    Sztárokról és idolokról írok,ajánlókat hozok,tippeket és tageket osztok meg veletek!Nézz be egy blogkóros lány oldalára!    *****    Az igazi karma a horoszkópodban a Felszálló holdcsomópont,a Chiron,a Lilith (Fekete Hold),Rendeld meg most!Várlak, katt!    *****    családi adókedvezmény 2018 nyomtatvány letöltés, feltételek tudnivalók    *****    Rendelj születési horoszkópot és 3 év elõrejelzés ajándékba a tiéd. Ne feledd a horoszkóp a lélek tükre,bele kell nézni!    *****    családi pótlék utalás 2018 - csp utalás - utalás idõpontja 2018 - családi pótlék kifizetések !    *****    Ismerd meg az Olicity párost! Minden a Zöld Íjász címû sikersorozat imádott szerelmespárjáról! Mindennap friss!    *****    SZEREPJÁTÉK! Ha aktív oldalon szeretnél játszani, nézz be és légy része egy egyedi történetnek! Csatlakozz!    *****    Karácsonyi képekkel vár a Mesetár! Kukkants be a két nyuszihoz és Miska macskához! Boldog ünnepeket kíván: Nyuszi Mama    *****    Kellemes Karácsonyi Ünnepet és Békés, Boldog Új Esztendõt Kívánok minden Kedves látogatómnak!    *****    Kellemes Ünnepeket kíván Neked is a Zara Larsson Magyarország! - Kellemes Ünnepeket kíván Neked is a Zara Larsson HU!    *****    The Resident - A FOX kórházi drámasorozata januárban indul Matt Czuchry és Emily VanCamp fõszereplésével! Nézzetek be!