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

4 ارسال در این موضوع قرار دارد

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

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

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

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


به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری

0