منوی آبشاری

[hesam 8]

دیروز همینجوری داشتم تو اینترنت میچرخیدم نمیدونم که چی شد خیلی اتفاقی با این منو که بصورت CSS و HTML هست برخورد کردم از ظاهرش خیلی خوشم اومد گفتم اینجا قرار بدم تا شما دوستان هم اگر خواستید استفاده کنید. منوی نهایی مثل تصویر زیر باید بشه پس اگه اینجوری نشد یه جای کار اشتباه کردید!!

 

 

 

 

 

کد html

 

<ul class="menu cf"><li><a href="https://go.20script.ir/index.php?url=">لوکس آی تی</a></li><li><a href="https://go.20script.ir/index.php?url=">لوکس آی تی</a><ul class="submenu"><li><a href="https://go.20script.ir/index.php?url=">loxit.ir</a></li><li><a href="https://go.20script.ir/index.php?url=">لوکس آی تی</a></li><li><a href="https://go.20script.ir/index.php?url=">loxit.ir</a></li><li><a href="https://go.20script.ir/index.php?url=">لوکس آی تی</a></li></ul></li><li><a href="https://go.20script.ir/index.php?url=">لوکس آی تی</a></li><li><a href="https://go.20script.ir/index.php?url=">لوکس آی تی</a></li><li><a href="https://go.20script.ir/index.php?url=">لوکس آی تی</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);}

 

[A B A D A N 237]

ایول داش حسام بابت آموزشت :105:

 

دمت گرم داداش خیلی کاربردی بود :41:

 

حرف نداری:126:

[hesam 8]

ایول داش حسام بابت آموزشت :105:

 

دمت گرم داداش خیلی کاربردی بود :41:

 

حرف نداری:126:

 

خواهشت :90: