کانال تلگرام تبلیغات

ساخت منوی افقی با html css

در این بخش از آموزش css می خواهیم به سراغ ساخت منوی افقی با html,css برویم.

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

کد کامل منوی افقی با html,css

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

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

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

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: darkseagreen;
}
</style>
</head>
<body>
<ul>
<li><a href="" class="active">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</body>
</html>

کد html منوی افقی

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

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

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a href="" class="active">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">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;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: darkseagreen;
}
</style>
</head>

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

تاپ سایت 98
عضویت طلایی
محصولات آموزشی
ثبت نظر

سرفصل آموزش HTML