آموزش منوهای زیبا با css
آموزش منوهای زیبا با css شامل منوی عمودی و افقی . همراه با مثال و توضیح کدها. کدها را می توانید در پروژه های خود استفاده نمایید. کدها را می توانید در یک فایل html ذخیره کرده و تست نمایید.
در این بخش از آموزش css به سراغ آموزش منوهای زیبا با css می رویم.
این آموزش متعلق به سایت ، تاپ سایت 98 میباشد.
آموزش منوی عمودی با css :
آموزش منوی عمودی با css همراه با سورس کد . کد زیر تست شده میباشد.
کد زیر را می توانید در یک فایل با پسوند html ذخیره و تست کنید.
این کد شامل یک منوی عمودی در سمپ چپ و یک بخش برای محتوا می باشد.
برای ساخت هر منو زیبا با css می بایست ابتدا کد html و سپس کد css را بنویسید.
کد html منوی عمودی :
کد html منوی عمودی زیر شامل یک بخش اصلی با آی دی all میباشد.
این بخش نیز دارای دو قسمت می باشد که یکی ul است که برای ساخت منو استفاده شده و یکی div با آی دی d1میباشد که محتوا در آن قرار داه میشود.
درهر li یک تگ a قرار داده ایم تا هر li یک لینک باشد .
کد css منوی عمودی :
کد css منوی عمودی را در تگ style قرار داده ایم.
ابتدا برای id ی all یک پس زمینه قرار داده ایم. این رنگ را شاید نبینید اما برای تست مناسب است.
سپس برای body استایل نوشته ایم و مقدار margin , padding را صفر گذشاته ایم تا هیچ فاصله خالی در اطراف نداشته باشیم .
سپس برای لیست یا تگ ul استایل نوشته ایم. تگ ul لیست ما میباشد که عرض آن 200 پیکسل و ارتفاع آن را 1000 پیکسل گذاشته ایم.
برای تگ a رنگ مشخص کرده ایم و برای li هاور مشخص کرده ایم. کاربر وقتی روی لینک قرار می گیرد رنگ پس زمینه تغییر می کند این کار برای جذابیت منو می باشد.
<html>
<head>
<style>
*{
box-sizing: border-box;
}
#all{
background-color: antiquewhite;
}
body{
margin:0;
padding: 0;
background-color: darkseagreen;
}
ul{
list-style: none;
width: 200px;
background-color: lightgray;
height: 1000px;
float: left;
padding: 10px;
margin: 0;
}
li{
font-size: 16px;
font-family: Arial;
padding: 10px 0;
}
li a{
text-decoration: none;
color: #333;
display: block;
}
li:hover{
background-color: #fff;
padding: 10px 0;
}
#d1{
margin-left: 200px;
padding:1px;
height:1000px;
} </style>
</head>
<body>
<div id="all">
<ul>
<li><a class="active" href="https://topsite98.com/">Home</a></li>
<li><a href="https://topsite98.com/">html</a></li>
<li><a href="https://topsite98.com/">css</a></li>
<li><a href="https://topsite98.com/">php</a></li>
</ul>
<div id="d1">
<h1>topsite98</h1>
<p>topsite98</p>
<p>topsite98</p>
</div>
</div>
</body>
</html>
آموزش منوی افقی با css :
آموزش منوی عمودی با css همراه با سورس کد . این کد تست شده است و می توانید آن را در یک فایل html ذخیره کرده و تست کنید. این منوی افقی زیبا را می توانید در پروژه های خود استفاده نمایید.
برای ساخت منوی زیبا با css می بایست از ترکیب html , css استفاده کنید.
برای ایجاد منو افقی ابتدا با تگ ul ، یک منوی ساده ایجاد می کنیم و برای زیباسازی آن از css استفاده می کنیم.
توضیح منوی افقی با css :
برای حذف دایره های کنار li ها از ویژگی list-style استفاده می کنیم و آن را مقدار none قرار می دهیم.
برای ایجاد فاصله های داخلی و بیرونی از margin , padding استفاده می کنیم.
برای تغییر رنگ پس زمینه از background-color استفاده می کنیم.
برای تغییر رنگ متن از color استفاده میکنیم.
برای نوشتن استایل برای تگ a که در li قرار دارد به صورت li a عمل میکنیم.
برای هاور نیز از hover استفاده می کنیم. برای هر تگ ، نام تگ و دو نقطه و hover را می نویسیم.
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</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><a href="#about">About</a></li>
</ul>
</body>
</html>
منبع: تاپ سایت 98
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید