close
تبلیغات در اینترنت
آموزش ساخت منو به وسیله CSS و HTML

آموزش ساخت منو به وسیله CSS و HTML

آموزش ساخت منو به وسیله CSS و HTML
تعداد بازديد : 30

منوی آبشاری یکی از پر کاربرد ترین ابزاری است که طراحان سایت در قالب های خود استفاده میکنند.لینک دانلود دموی این منو در انتهای پست قرار گرفته است.

HTML

ابتدا کد های زیر را در یک فایل html قرار دهید.<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>menu</title> </head> <body> <div id="menu"> <ul> <li> HOME </li> <li> HTML <ul class="dropdown"> <li>1</li> <li>2</li> <li>3</li> <li> 4 <ul class="sub_menu"> <li>sub 1</li> <li>sub 2</li> <li>sub 3</li> </ul> </li> </ul> </li> <li> ABOUT US </li> </ul> </body> </html> شاید در نگاه اول ul و li هایی که درج کردیم کمی گیج کننده به نظر برسند ولی با کمی دقت متوجه تمام کدهای ساده بالا می شوید.رسیدیم به بخش شیرین داستان که همون استایل دهی به منو میباشد.کد های استایل زیر را در قسمت <head></head> کپی کنید.<style> padding:0px; margin:0px; } #menu{ margin:0px; padding:0px; } #menu ul li{ display:inline-block; float:left; list-style:none; position:relative; padding:10px 15px; background-color: #212121; color:#FFF; font: 15px cursive; text-align:center; } #menu ul li ul{ position: absolute; left:0px; top:100%; text-align:left; z-index:999; display:none; } #menu ul li ul{ position: absolute; left:0px; top:100%; padding: 0px; background:transparent !important; } #menu ul li ul li{ background:#333538; text-align:left; width:150px; text-align:left; border-bottom:solid 1px #2D2D2D; position:relative; } #menu ul li:hover{ cursor:pointer; background-color:rgba(173,0,2,1.00); } #menu ul li ul li:hover{ background:#DD5136; color:#FFF; } #menu ul li:hover ul{ display:block; } #menu ul li ul li ul{ position: absolute; top:0px !important; left:100% !important; background:transparent !important; display:none !important; } #menu ul li ul li ul li{ margin-top:0px; } #menu ul li ul li:hover ul{ display:block !important; } </style>دمو آموزش را از لینک زیر دریافت کنید:)
 DROP DOWN MENU
 1396/1/1
نویسنده :
تاریخ انتشار : شنبه 01 مهر 1396 ساعت: 16:18
بخش نظرات این مطلب
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:):(;):D;)):X:?:P:*=((:O@};-:B/:):S
نظر خصوصی
مشخصات شما ذخیره شود ؟[حذف مشخصات] [شکلک ها]
کد امنیتی