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

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

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

در این بخش از آموزش html به سراغ آموزش ساخت منو عمودی زیبا با html می رویم. در تاپ سایت 98 می توانید آموزش ساخت منوهای مختلف با html , css را مشاهده فرمایید.  در این آموزش دو مثال زیبا را خواهیم داشت.

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

در این بخش ابتدا کد html ساخت منو عمودی را می بینید.

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

یکی از لینک ها دارای کلاسی بنام active است که قصد داریم آن را از دیگر لینک ها جدا کنیم.

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

 

<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>

کد css ساخت منوی عمودی

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

کد css را در یک تگ style قرار می دهیم.

ابتدا برای کلاس vertical-menu عرضی را مشخص می کنیم.

سپس برای لینک ها کد css خود را می نویسیم. لینک ها در حالت اولیه دارای رنگ مشکی و توپر با پس زمینه مشخص خواهند بود.

با هاور کردن رنگ پس زمینه تغییر می کند.

کلاس active دارای مشخصات دیگری است. رنگ پس زمینه آن سبز و رنگ متن سفید خواهد بود.

 

<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>

 

کد کامل ساخت منوی عمودی

در این قسمت می توانید کد کامل ساخت منوی عمودی را مشاهده نمایید.

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

<!DOCTYPE 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 ، یک منوی زیبای دیگر را ایجاد کرده ایم که می توانید آن را نیز استفاده نمایید.

 

<!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>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>

امیدواریم این آموزشها برای شما مفید باشد.

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

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

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

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

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

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

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