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

سلام امروز براتون کد منو باز شونده خیلی خاص اوردم میتونید از منو در جاهای مختلف سایت یا وبلاگ خود استفاده کنید برای دریافت به ادامه مطلب بروید سلام به دوستان گ...

کد و ابزار - جاوا اسکریپت - سی اس اس css - ابزار وبمسترها -

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

110860+

ارسال شده در سه شنبه 19 آبان 1394

سلام امروز براتون کد منو باز شونده خیلی خاص اوردم میتونید از منو در جاهای مختلف سایت یا وبلاگ خود استفاده کنید برای دریافت به ادامه مطلب بروید...

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

امروز براتون یه کد منو بسیار زیبا و باز شونده قرار دادم که امیدوارم خوشتون بیاد

این کد را بین <head> </head> قرار دهید

<style> .menu { height: 40px; width: 435px; direction:rtl; background: #4c4e5a; background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .menu li { position: relative; list-style: none; float: right; display: block; height: 40px; } .menu li a { display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #4f5058; font-family: Tahoma, Arial, sans-serif; font-weight: normal; font-size: 12px; color: #f3f3f3; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; -ms-transition: color .2s ease-in-out; transition: color .2s ease-in-out; } .menu li:first-child a { border-left: none; } .menu li:last-child a{ border-right: none; } .menu li:hover > a { color: #8fde62; } .menu ul { position: absolute; top: 40px; right: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s; } .menu li:hover > ul { opacity: 1; } .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s; } .menu li:hover > ul li { height: 36px; overflow: visible; padding: 0; direction:rtl; } .menu ul li a { width: 100px; padding: 4px 30px 4px 0; margin: 0; border: none; border-bottom: 1px solid #353539; } .menu ul li:last-child a { border: none; } </style>

سپس کد زیر رو در هرجا که میخواهید منو نمایش داده شود قرار بدین

<ul class="menu"> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">هایپر</a></li> <li><a href="#">هایپر</a> <ul> <li><a href="#" class="documents">تست</a></li> <li><a href="#" class="messages">تست</a></li> <li><a href="#" class="signout">خروج از سایت</a></li> </ul> </li> <li><a href="#">بارگذاری فایل</a></li> <li><a href="#">ویدئو</a></li> <li><a href="#">برنامه ها</a></li>

دمو:

صفحه اصلی

کلمات کلیدی : کد منو برای سایت , کد منو برای وبلاگ , کد منو برای سایت و وبلاگ , کد منو زیبا و حرفه ای , کد منو بازشونده , کد منو بازشونده جدید , کد منو فلت , هایپر تمپ , کد منو , ابزار وبمستر ,

محصولات هایپرتمپ

محصول به زودی اضافه می شود

توضیحات محصول در این مکان به زودی اضافه می شود

20,000 تومان جزئیات / خرید

محصول به زودی اضافه می شود

توضیحات محصول در این مکان به زودی اضافه می شود

20,000 تومان جزئیات / خرید

محصول به زودی اضافه می شود

توضیحات محصول در این مکان به زودی اضافه می شود

20,000 تومان جزئیات / خرید

محصول به زودی اضافه می شود

توضیحات محصول در این مکان به زودی اضافه می شود

20,000 تومان جزئیات / خرید

دریافت آنی

پشتیبانی 24 ساعته

درگاه پرداخت آنلاین

امکان دریافت مجدد

دارای نماد اعتماد