آموزش ساخت منو عمودی زیبا با html
در این بخش از آموزش html به سراغ آموزش ساخت منو عمودی زیبا با html می رویم. در تاپ سایت 98 می توانید آموزش ساخت منوهای مختلف با html , css را مشاهده فرمایید. در این آموزش دو مثال زیبا را خواهیم داشت.
کد html ساخت منو عمودی
در این بخش ابتدا کد html ساخت منو عمودی را می بینید.
با استفاده از یک div یک بلاک را ایجاد کرده ایم و لینک ها را در آن قرار داده ایم.
یکی از لینک ها دارای کلاسی بنام active است که قصد داریم آن را از دیگر لینک ها جدا کنیم.
کد کامل ساخت منوی عمودی را در قسمت پایین مشاهده می کنید.
<a href="https://topsite98.com/" class="active">topsite98.com</a>
<a href="https://topsite98.com/">html</a>
<a href="https://topsite98.com/">css</a>
<a href="https://topsite98.com/">html5</a>
<a href="https://topsite98.com/">css3</a>
</div>
کد css ساخت منوی عمودی
در بخش پایین کد css ساخت منوی عمودی را مشاهده می کنید.
کد css را در یک تگ style قرار می دهیم.
ابتدا برای کلاس vertical-menu عرضی را مشخص می کنیم.
سپس برای لینک ها کد css خود را می نویسیم. لینک ها در حالت اولیه دارای رنگ مشکی و توپر با پس زمینه مشخص خواهند بود.
با هاور کردن رنگ پس زمینه تغییر می کند.
کلاس active دارای مشخصات دیگری است. رنگ پس زمینه آن سبز و رنگ متن سفید خواهد بود.
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
font-weight: bold;
border: 1px solid #555;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
</style>
کد کامل ساخت منوی عمودی
در این قسمت می توانید کد کامل ساخت منوی عمودی را مشاهده نمایید.
منوی عمودی زیبایی را ایجاد کرده ایم. می توانید این کد را در یک فایل با پسوند html ذخیره کرده و اجرا نمایید.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vertical-menu {
width: 200px;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
font-weight: bold;
border: 1px solid #555;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>TopSite98.COM</h1>
<div class="vertical-menu">
<a href="https://topsite98.com/" class="active">topsite98.com</a>
<a href="https://topsite98.com/">html</a>
<a href="https://topsite98.com/">css</a>
<a href="https://topsite98.com/">html5</a>
<a href="https://topsite98.com/">css3</a>
</div>
</body>
</html>
مثال دوم ساخت منوی عمودی زیبا با html
در مثال دوم ساخت منوی عمودی زیبا با 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>TopSite98.com</h2>
<ul>
<li><a class="active" href="https://topsite98.com/">Home</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>
امیدواریم این آموزشها برای شما مفید باشد.
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید