چگونه در طراحی سایت منویی با کد HTML ایجاد کنیم؟

چگونه در طراحی سایت منویی با کد HTML ایجاد کنیم؟

تعبیه منو از جلوه های مهم طراحی سایت است که در جذب و جلب نظر کاربر نقش مهمی دارد و همچنین در بهینه سازی سایت نیز تاثیر خوبی می گذارد.

تعبیه منو یکی از عوامل اصلی طراحی سایت به حساب می آید که صفحه های سایت را بهم ربط می دهد و در واقع می تواند نقشه ای از سایت در اختیار کاربر قرار دهد و به همین خاطر در طراحی سایت باید مورد توجه باشد و در همه صفحه های سایت تعبیه و ایجاد شود. تگ <li> جهت فهرست دهی و تگ <ul> جهت فهرست دهی نامرتب و تگ <ol> برای فهرست دهی مرتب استفاده می شود.

 

<ul style="list-style-type:disc">

<li>Coffee</li>

<li>Tea

<li>Milk</li>

</ul>

در مثال فوق آیتم ها از نوع disc فهرست دهی می شود.

<ol type="a">

<li>Coffee</li>

<li>Tea

<li>Milk</li>

</ol>

و در مثال فوق آیتم ها به صورت مرتب از حرف a نام گذاری می شوند.

با به کارگیری کدهای css می توانید استایل مخصوصی را برای منو در طراحی سایت تولید کنید. در مثال زیر منوی افقی را می بینید که در آن استایل مخصوصی مدنظر بوده است.

<!DOCTYPE html>

<html>

<head>

<style>

ul#menu {

padding: 0;

}

ul#menu li {

display: inline;

}

ul#menu li a {

background-color: black;

color: white;

padding: 10px 20px;

text-decoration: none;

border-radius: 4px 4px 0 0;

}

ul#menu li a:hover {

background-color: orange;

}

</style>

</head>

<body>

<h2>Horizontal List</h2>

<ul id="menu">

<li><a href="/demo/html_tables.asp">Tables</a></li>

<li><a href="/demo/html_lists.asp">Lists</a></li>

<li><a href="/demo/html_blocks.asp">Blocks</a></li>

<li><a href="/demo/html_classes.asp">Classes</a></li>

</ul>

</body>

</html>

طراحی و تعبیه منو علاوه بر ربط دادن صفحه های داخلی فروشگاه ساز و سایت به همدیگر، باعث زیبا شدن صفحه های وب سایت نیز می شود که این زیباسازی باعث جذب و جلب نظر کاربر می گردد و به موازات آن سئو سایت یا بهینه سازی سایت را هم بالا برده و تاثیر مفیدی در آن می گذارد. برای آشنایی با ویژگی های html نگاهی هم به مطلب نحوه استفاده از ویژگی دانلود در html5 بیندازید.

 

چاپایمیل