logo
logo
تبلیغ کلیکی تاپ سایت 98

آموزش ساخت منو افقی زیبا با html

آموزش ساخت منو افقی زیبا با html
هدایت عباسی آموزش HTML

در این بخش از آموزش html به سراغ آموزش ساخت منو افقی زیبا با html می رویم. در تاپ سایت 98 آموزش ساخت منوهای مختلف وجود دارد. چند منو زیبا را آموزش خواهیم داد.

کد html ساخت منو افقی

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

با یک تگ ul یک لیست ایجاد می کنیم در هر li یک لینک یا تگ  a قرار می دهیم تا بتوانیم به صفحات مختلف لینک بدهیم.

<ul>
<li><a class="active" href="https://topsite98.com/">topsite98</a></li>
<li><a href="https://topsite98.com/">News</a></li>
<li><a href="https://topsite98.com/">Contact</a></li>
<li><a href="https://topsite98.com/">About</a></li>
</ul>

کد css ساخت منو افقی

حال برای لیست یا تگ ul ، کد css ساخت منو افقی را می نویسیم.

در بخش style کد زیر را وارد می کنیم.

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #690EE6;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #444;
}
</style>

کد کامل منوی افقی

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

این کد را می توانید در یک فایل html ذخیره کرده و اجرا کنید.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #690EE6;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #444;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="https://topsite98.com/">topsite98</a></li>
<li><a href="https://topsite98.com/">News</a></li>
<li><a href="https://topsite98.com/">Contact</a></li>
<li><a href="https://topsite98.com/">About</a></li>
</ul>

</body>
</html>

توضیح مختصری از کدهای css

در این بخش توضیح مختصری از کدهای css را در اختیار شما عزیزان قرار می دهیم.

با استفاده از list-style-type نقطه های اضافی را از بین می بریم.

با استفاده از margin فاصله های بیرونی را از بین می بریم تا فاصله ها زیبایی منو را از بین نبرد.

با استفاده از padding فاصله درونی را صفر می کنیم.

رنگ پس زمینه را مشخص می کنیم.

با دستور float عناصر را در کنار هم قرار می دهیم.

با دستور text-align متن را در وسط قرار می دهیم.

با دستور color رنگ متن را مشخص می کنیم.

ساخت منوی افقی دوم

در بخش پایین ساخت منوی افقی دوم را به شما آموزش می دهیم.

این کد را نیز می توانید با پسوند html ذخیره کرده و اجرا کنید.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<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 style="float:right"><a href="#about">About</a></li>
</ul>
</body>
</html>

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

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

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

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.