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

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

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

کد کامل ساخت منوی افقی بازشو با css

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#home">html</a>
<a href="#css">css</a>
<div class="dropdown">
<button class="dropbtn">site
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">ui</a>
<a href="#">ux</a>
<a href="#">theme</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>

کد html منوی افقی بازشو

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
<a href="#home">html</a>
<a href="#css">css</a>
<div class="dropdown">
<button class="dropbtn">site
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">ui</a>
<a href="#">ux</a>
<a href="#">theme</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>

کد css منوی افقی بازشو

در قسمت پایین کد css را می بینید. کد css را در قسمت head قرار دهید. در مثال بالا و کدکامل ، نحوه استفاده از کدهای css را مشاهده می کنید.

کدهای css منوی عمودی در بین تگ style قرار می دهیم.

منو افقی بازشو با کدهای css جذاب می شود. با دادن استایل به ul و a منو بوجود می آید.

<style>
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>

 


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

تگ ها :
عضویت طلایی
ثبت نظر