خانه » بلاگ » css » نحوه ی ایجاد منو و زیر منو با HTML و CSS
همانطور که می دانید یکی از مهم ترین بخش های وب سایت منوی ناوبری می باشد. این قسمت جز بخش های بسیار تزئینی و تعاملی صفحه است. در این مقاله شما را با نحوه ی ایجاد منو و زیر منو آشنا خواهیم کرد. به طوریکه در پایان این آموزش شما می توانید یک منوی ناوبری تعاملی ایجاد نمایید. با تیم طراحی سایت اصفهان وب یار همراه باشید.
منوی ناوبری لیستی جزو موارد اصلی سایت است که معمولاً از مجموعه‌ای از لینک ها یا آیکون‌ها تشکیل شده و از نظر ظاهری با سایر موارد سایت تفاوت دارد. این منوی ناوبری مسیر هدایت کاربران و چگونگی تعامل آنها با وب سایت را مشخص می کند.
بدون وجود پیمایش در سایت، محتوای سایت بی نظم بوده و نمی تواند هدف سایت را نشان دهد. ساختار منوهاباید ساده و البته جذاب باشند تا کاربران بتوانند به خوبی آن را درک کنند و همچنین با ایجاد خلاقیت و طراحی مناسب عناصر لازم برای چرخش کاربر در وب سایت را فراهم کنند.
مرحله اول-ساخت منو ساده
در مرحله ی اول آموزش ساخت منو در html ، باید کد های html مربوط به منوی اصلی در یک فایل با پسوند html نوشته و ذخیره شود. برای نوشتن منو در html تگ های ul و li مورد استفاده قرار می گیرد.
<!DOCTYPE html>
<head>
<title>DropDown Menu with HTML and CSS</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">طراحی سایت </a></li>
<li><a href="#">سئوسایت </a></li>
<li><a href="#">طراحی فروشگاه اینترنتی </a></li>
<li><a href="#">درباره وب یار</a></li>
<li><a href="#">تماس با وب یار</a></li>
</ul>
</nav>
</body>
</html>
کد بالا یک فهرست توسط ul ایجاد می کند. آیتم های منو در درون این فهرست و در تگ li قرار می گیرند. کد های بالا لیستی از منوی ساده ی عمودی فاقد زیر منو را نمایش می دهد.این کد ها شامل 5 منوی اصلی می باشد.
مرحله دوم- ساخت زیر منو
تا اینجا تنها منو های اصلی طراحی شده است، حال برای این که منو هایی با زیر منو داشته باشیم باید درون آیتم دلخواه خود که می خواهیم زیر منو داشته باشد یک بلاک ul و li اضافه کنیم. برای مثال می خواهیم به منوی ” طراحی سایت ” خود 3 زیر منو اضافه کنیم. به کد های زیر توجه کنید.
<li><a href="#"> طراحی سایت </a>
<ul>
<li><a href="#">طراحی سایت اصفهان </a></li>
<li><a href="#"> طراحی سایت در اصفهان </a></li>
<li><a href="#"> طراحی سایت حرفه ای </a></li>
</ul>
</li>
با توجه به کد های بالا برای اضافه کردن زیر منو به منوی اصلی “طراحی سایت” باید یک بلاک کامل ul و li به تگ li آن اضافه کنیم. به همین ترتیب می توانید به سایر منو ها هم زیر منو اضافه کنید.
<nav>
<ul>
<li><a href="#"> طراحی سایت </a>
<ul>
<li><a href="#">طراحی سایت اصفهان </a></li>
<li><a href="#"> طراحی سایت در اصفهان </a></li>
<li><a href="#"> طراحی سایت حرفه ای </a></li>
</ul>
</li>
<li><a href="#"> سئو سایت </a>
<ul>
<li><a href="#">سئو سایت اصفهان </a></li>
<li><a href="#"> سئو سایت در اصفهان </a></li>
<li><a href="#"> سئوداخلی سایت</a></li>
</ul>
</li>
<li><a href="#">طراحی فروشگاه اینترنتی </a></li>
<li><a href="#">درباره وب یار</a></li>
<li><a href="#">تماس با وب یار</a></li>
</ul>
</nav>
بعد از این که نوشتن کد های html تمام شد. نوبت به استایل دهی و تعریف کلاس های css می شود.
مرحله سوم- ساخت منو حرفه ای با css
در این مرحله از ساخت منو با css ابتدا باید کاری کنیم که در حالت عادی تنها منو های اصلی به نمایش درآیند و تنها وقتی که موس بر روی گزینه های منوی ایجاد شده توسط ما می رود و یا بر روی آنها کلیک می شود زیر منوی آن ها به نمایش در آید به همین خاطر باید کد های css پایینی را به استایل خود اضافه نمایید.
ul li ul
{
Display:none;
}
از این کد برای مخفی کردن زیر منوهای منوی اصلی در حالت اولیه استفاده می شود.
ul li:hover ul
}
display: block;
{
از این کد برای نمایش زیر منوهای منوی اصلی هنگامی که موس بر روی هر کدام از آن ها قرار می گیرد استفاده می شود.
نکته ی مهم دیگر استفاده از Position:relative می باشد. که قرار دادن Position در حالت relative باعث می شود که محل قرار گیری هر زیر منو با توجه به منوی راس آن باشد.
ul
{
Position: relative;
}
با استفاده از قطعه کد زیر می توانید منو های اصلی را در کنار هم قرار دهید.
ul li
{
Display:inline-block;
}
کد های زیر نمونه کد css برای ایجاد یک منویی با طراحی ساده می باشد. این کد ها صرفا به عنوان نمونه می باشد.شما می توانید بنابر نیاز خود این کد ها را تغییر دهید.
ul
{
list-style:none;
}
li
{
float: right;
width: auto;
position: relative;
height: 40px;
}
ul li
{
; float: right
; font-family:'yekan'
; display: inline-block
}
ul li a
{
padding:5px 18px 0px 10px;
font: 15px 'Yekan';
; font-weight:bold
color:#323232;
max-height:33px;
margin-top:3px;
line-height:0px;
display: inline-block;
}
ul li ul
{
Display:none;
; padding: 0
margin:5px;
position: absolute;
transition: all 0.5s ease 0s;
visibility: hidden;
width: 150px;
; Z-index:1
margin-right:-10px;
}
ul li ul li
{
width:150px;
height:auto;
text-align:center;
padding:10px;
background-color:#dcedc8;
border:1px solid #BDBDBD;
opacity: .85;
}
ul li ul li:hover
{
width:150px
border:1px solid #ffc107
background-color:#ffc107
}
ul li:hover ul
{
display: block;
; opacity: 1
; visibility: visible
}
ul li ul li a
{
color: #000000;
width: 150px;
text-align: center;
padding:15px;
}
در پایان از توجه شما همراهان عزیز وب یار بسیار سپاس گذاریم. برای آگاهی از آخرین آموزش های منتشر شده توسط وبیار ما را در اینستاگرام دنبال کنید.همچنینمی توانید در کلاس های طراحی سایت وبیار نیز با مشاورین ما تماس بگیرید.
