رفتن به مطلب

منوی آبشاری


hesam

پست های پیشنهاد شده

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

 

menu.png?8109ae

 

 

 

 

کد html

 

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

 

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

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

 

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

 

حرف نداری:126:

 

خواهشت :90:

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...