آموزش ساخت منو افقی زیبا با html
در این بخش از آموزش html به سراغ آموزش ساخت منو افقی زیبا با html می رویم. در تاپ سایت 98 آموزش ساخت منوهای مختلف وجود دارد. چند منو زیبا را آموزش خواهیم داد.
کد html ساخت منو افقی
در این بخش ابتدا کد html ساخت منو افقی را می بینید. با استفاده از یک لیست یا ul می توانیم یک منو زیبا را ایجاد کنیم.
با یک تگ ul یک لیست ایجاد می کنیم در هر li یک لینک یا تگ a قرار می دهیم تا بتوانیم به صفحات مختلف لینک بدهیم.
<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 کد زیر را وارد می کنیم.
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 ذخیره کرده و اجرا کنید.
<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 ذخیره کرده و اجرا کنید.
<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
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید