منوی آبشاری بسیار زیبا

hharddy

کاربر عضو
امروز داشتم دنبال یه اموزش برای فتوشاپ میگشتم نمیدونم چی شد رسیدم به این منو :|

گفتم بزارم اگر کسی دوست داشت استفاده کنه

منوی نهایی مثل تصویر میشه :/

8ade-menu.png

خوب اول که همون کد های html عه


کد:
<ul class="menu cf">

    <li><a href="">لوکس آی تی</a></li>

    <li>

        <a href="">لوکس آی تی</a>

        <ul class="submenu">

            <li><a href="">loxit.ir</a></li>

            <li><a href="">لوکس آی تی</a></li>

            <li><a href="">loxit.ir</a></li>

            <li><a href="">لوکس آی تی</a></li>

        </ul>         

    </li>

    <li><a href="">لوکس آی تی</a></li>

    <li><a href="">لوکس آی تی</a></li>

    <li><a href="">لوکس آی تی</a></li>

</ul>
اینم از استایل


کد:
.cf:before,

.cf:after {

    content: " ";

    display: table;

}


.cf:after {

    clear: both;

}


.cf {

    *zoom: 1;

}

.menu,

    .submenu {

        margin: 0;

        padding: 0;

        list-style: none;

    }

/* Main level */

.menu {          

    margin: 50px auto;

    width: 800px;

    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;


}

/* Dropdown level*/

.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);   
        }        


/* Odd stuff */

.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);

}                

/* Even stuff */

.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);

}


/* Show dropdown */


.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);            
}
 

Mohammad

مدیر انجمن
پرسنل مدیریت
قشنگه ، اما ادم احساس میکنه منو ها تنظیم نیستن... :39: نمیدونن مدلشه :دی

 

hharddy

کاربر عضو
:D همین تنظیم نیست خوبه دیگه فرق داره با بقیه :D
 
بالا