elham1388
November 29th, 2014, 13:39
ایجاد منو از فاکتور اصلی طراحی سایت به جهت ارتباط میان صفحات سایت می باشد که در طراحی وب سایت بسیار مورذد توجه قرار می گیرد و همچنین نیاز به قرار دادن منو در تمامی صفحات نیز به اهمیت آن می افزاید. تگ <ul> برای لیست دهی نامرتب استفاده می شود و از تگ <li> به منظور لیست دهی استفاده می شود. تگ <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>
طراحی منو علاوه بر اهمیت موضوع در ارتباط میان صفحات، در زیبای صفحات وب سایت بسیار حائز اهمیت می باشد. طراحی وب سایت زیبا موجب جلب توجه و نظر کاربر می شود که در راستای آن سئو سایت را تحت تاثیر خود قرار می دهد.
منبع: ایجاد منو با کدhtm در طراحی سایت (http://www.npco.net/demo/articles/334-menu-web-design-htm.html)
<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>
طراحی منو علاوه بر اهمیت موضوع در ارتباط میان صفحات، در زیبای صفحات وب سایت بسیار حائز اهمیت می باشد. طراحی وب سایت زیبا موجب جلب توجه و نظر کاربر می شود که در راستای آن سئو سایت را تحت تاثیر خود قرار می دهد.
منبع: ایجاد منو با کدhtm در طراحی سایت (http://www.npco.net/demo/articles/334-menu-web-design-htm.html)