ساخت منو با hmtl و css

menu and submenu with html & css

سلام دوستان بایکی دیگه از آموزش های تیم برنامه نویسی کلنل درخدمتون هستیم خب تو این آموزش میخوایم نحوه ساخت یک منو با html و css رو بهتون آموزش بدیم خب بریم سراغ ساخت منو

برای ساخت منو  زیر منو با html و css:

 

⦁ ابتدا یک فایل html ساده که به ترتیب دارای head , body است ایجاد میکنیم :

<html>
<head>
<title>Document</title>
</head>
<body>

</body>
</html>

: ایجاد یک قسمت منو دارای پس زمینه مشکی کم رنگ

ابتدا یک قسمت کلی از بالای صفحه سایت توسط تگ <div> ایجاد میکنیم و به آن با استفاده از فایل css استایل میدهیم :

<div class=”header” id=”nav1”>

</div>

برای این که زمانی که صفحه را scroll میکنیم منو هم اسکرول شود به آن پوزیشن ثابت میدهیم برای این که پس زمینه منو کمرنگ شود به رنگ مشکی آن (۰, ۰, ۰, ۰) آلفا ۰٫۷ میدهیم استایل z-index را برای مشخص شدن س زمینه سایر قسمت ها موق اسکرول کردن صفحه به آن مقدار ۱۰۰ میدهیم

CSS
.header {
Position: fixed;
Height: 150px ;
Width: 100%;
Background: rgba(0, 0, 0, 0.7);
z-index: 100;
}

⦁ برای اضافه کردن لوگو در سمت چپ منو از img استفاده میکنیم :

<img src=”img1.jpg”>

برای این که عکس اندازه خودش فضابگیرد به آن Display و بعد inline میدهیم و برای قرار گرفتن سمت چپ منو به آن Float چپ میدهیم

Img {
Display: inline;
Float: left;
Padding: 10px 20px;
Width: 200px;
Height: 200px;
}

⦁ برای ایجاد کردن منو ها یک لیست توسط تگ <ul> ایجاد میکنیم که دارای هفت تگ <li> است :

زمانی که منو ها توسط ماوس لمس میشوند حالت کلیک به خود بگیرند به li ها تگ a اضافه میکنیم ک همانند لینک عمل میکنند
تگ های a به صورت پیش فرض دارای رنگ آبی و underline آبی رنگ هستند برای حأف این کار به استایل های آن text-decoration میدهیم

<ul class=”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Section</a></li>
<li><a href=”#”>Gallery</a></li>
<li><a href=”#”>Blog</a></li>
<li><a href=”#”>Contact</a></li>
</ul>

از آیدی nav1 که در div اصلی در بالا قرار دادیم به ul ها استایل میدهیم
تگ های ul به صورت خودکار دارای بولت هستند برای حذف انها از لیست استایل استفاده میکنیم
به آن فلوت راست میدهیم تا سمت است منو قرار بگیرند
فاصله ها را هم صفر قرار میدهیم تا پیش فرض فاصله ها به صورت اتوماتیک حذف شوند

a{
text-decoration: none;
}
#nav1 ul {
list-style:none;
position:relative;
float:right;
margin:0;
padding:0
}

به تگ های li همچنان فلوت راست میدهیم تا سمت راست منو قرار بگیرند

        #nav1 ul li {
position:relative;
float:right;
}

برای این که منو ها رنگ سفید به خود بگیرند به تگ های a استایل با رنگ سفید میدهیم

 

.menu li a {
color: white;
}

اگر بخواهیم زمانی که ماوس منو را لمس میکند زیر آن خط سفید رنگی ایجاد شود به آن border و اگر بخواهیم با طول مدت ۰٫۳ ثانیه این اتفاق بیفتد به آن transition میدهیم

.header a:hover {
border-bottom: ۱px solid white;
transition: all ۰٫۴s ease-out;
}

برای این که تگ های li از هم فاصله بگیرند

 

.header ul li {
Line-height: 80px;
Margin: 0 5px;
}

و به تگ های a استایل میدهیم

a{
padding: 10px;
}

⦁ برای نمایش زیر منو به صورت شکل زیر :

 

به li اولی که مربوط به قسمت خانه است یک تگ ul با کلاس زیر منو و دو تگ li اضافه میکنیم

<li><a href=”#”>Home</a>
<ul id=”zirmenu”>
<li><a class=”a3″ href=”#”>Package ۱</a></li>
<li><a class=”a3″ href=”#”>Package ۲</a></li>
</ul>
</li>

برای نمایش داده شدن زیر منو کد های زیر را به کلاس nav1 اضافه میکنیم

#nav1 ul ul {
display:none;
position:absolute;
}
#nav1 ul ul li {
float:none;
}
#nav1 ul ul a {
line-height:100%;
}
#nav1 ul li:hover > ul {
display:block
}

#zirmenu {
position: absolute;
top: ۱۰۰%;
left: ۰;
z-index: ۱۰۰;
display: none;
float: right;
padding: ۵px ۰;
font-size: ۱۳px;
text-align: center;
list-style: none;
background-color: rgba(0, ۰, ۰, ۰٫۷۸۸);
border: ۱px solid rgba(0,0,0,.15);
-webkit-box-shadow: ۰ ۶px ۱۲px rgb(0 ۰ ۰ / ۱۸%);
box-shadow: ۰ ۶px ۱۲px rgb(0 ۰ ۰ / ۱۸%);
}
#zirmenu li:hover {
background: white;
transition: all ۰٫۶s ease-out;
}
#zirmenu li a:hover {
color: black;
border-bottom: ۱px solid black;
}
#zirmenu li {
margin: ۰;
}

معرفی دورهنمایش رایگان

ساخت منو

قیمت :

رایگان

ساخت یک منو با استفاده از html و css

امتیازی ثبت نشده است
سطح آموزش مقدماتی
تعداد دانشجو : 100
مدت دوره: 00:10ساعتتاریخ انتشار: 21 مهر 1398آخرین بروزرسانی: 18 مهر 1400تعداد بازدید: 5677
قوانین و مزایای استفاده

  • دسترسی به فایل محصول به صورت مادام‌العمر
  • تضمین کیفیت آموزش ها
  • فعال‌سازی آنی لینک دانلود، پس از ثبت سفارش
  • فروش فقط از طریق سایت تیم کلنل
  • به صورت رایگان یک یا چند آموزش را دریافت می کنید.
قیمت :

رایگان