ساخت منوی عمودی با html

در این بخش از آموزش html می خواهیم به ساخت منوی عمودی با html برویم.

پیشنهاد  می کنم ابتدا دستورات html,css را بدانید سپس به سراغ ساخت منوی عمودی با html بیایید.

کد کامل منوی عمودی با html

در قسمت پایین ، کد کامل منوی عمودی با html را مشاهده می کنید. این کد را در یک فایل html کپی کرده و سپس آن را اجرا کنید.

حتما پسوند فایل ها را در ویندوز فعال کنید در غیر این صورت احتمال دارد که فایل html با پسوند txt ذخیره شود و اجرا نشود.

با استفاده از این کد یک منوی عمودی ساده ایجاد می کنید. کد بسیار ساده و قابل فهم می باشد.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>sh711.com</h2>
<p>Vertical Navigation Bar</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

کد html منوی عمودی

در قسمت پایین کد html منوی عمودی را مشاهده می کنید. در این قسمت ul را مشاهده می کنید . معمولا برای ساخت منوی افقی یا عمودی از ul استفاده می شود. سپس با کدهای css سعی می کنیم منو را زیبا کنیم. کدهای html به تنهایی هیچ جذابیتی ندارد و کارایی خاصی ندارد.

معمولا تگ a در بین تگ li قرار می گیردتا لینک ها بوجود بیاید. از منوها در تمام سایت ها استفاده می شود. در قسمت های بعد با منوهای حرفه ای تر آشنا خواهید شد.

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>sh711.com</h2>
<p>Vertical Navigation Bar</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

کد css منوی عمودی

در قسمت پایین کد css را می بینید. کد css را در قسمت head قرار دهید. در مثال بالا و کدکامل ، نحوه استفاده از کدهای css را مشاهده می کنید.

کدهای css منوی عمودی در بین تگ style قرار می دهیم.

منو عمودی با کدهای css جذاب می شود. با دادن استایل به ul و a منو بوجود می آید.

<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>

 


نویسنده : هدایت عباسی

تگ ها :
عضویت طلایی
ثبت نظر