به نام خدا
در این متن روش ساخت یک منوی زیبا با استفاده از css آموزش داده می شود. همچنین می توانید ویدیوی این آموزش را در انتهای متن ببینید.
ابتدا یک فایل html ایجاد کنید و کدهای زیر را در آن قرار دهید:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>menu css - by TarahSite.Net</title>
<style>
* {margin:0; padding:0;}
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:rgb(42,32,30);
}
div.container{
width:300px;
margin:0 auto;
}
div.header{
width:100%;
height:30px;
line-height:30px;
font-size:12px;
background:rgb(78,92,127);
margin-bottom:20px;
}
div.header p{
padding:0 10px;
}
div.header a{
color:#FFF;
text-decoration:none;
font-weight:bold;
}
</style>
<!-- ******************** WWW.TarahSite.Net ******************** -->
<link rel="stylesheet" type="text/css" href="nice-menu.css" />
<script type="text/javascript">
var _gaq=_gaq || [];
_gaq.push(['_setAccount','UA-17363589-1']);
_gaq.push(['_trackPageview']);
(function(){
var ga=document.createElement('script');
ga.type='text/javascript';
ga.async=true;
ga.src=('https:'==document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga,s);
})();
</script>
</head>
<body>
<div class="header" >
<p><a href="http://tarahsite.net" > بازگشت به سایت </a></p>
</div>
<div style="width:100%; color:#FFF;" >
<center>
<h1> Cssطراح سایت - منوی زیبا با استفاده از </h1><br />
<h2>WWW.TARAHSITE.NET</h2>
</center></div>
<div class="container" >
<ul class="nice-menu">
<li class="orange"><a href="#" >صفحه اصلی</a></li>
<li class="red" ><a href="#">درباره ما</a></li>
<li class="green" ><a href="#">محصولات</a></li>
<li class="blue" ><a href="#">وبلاگ</a></li>
<li class="bright" ><a href="#">ارتباط با ما</a></li>
<li class="red" ><a href="#">راهنما</a></li>
</ul>
</div>
<div class="container">
<ul class="nice-menu bounce">
<li class="orange" ><a href="#" >صفحه اصلی</a></li>
<li class="red" ><a href="#">درباره ما</a></li>
<li class="green" ><a href="#">محصولات</a></li>
<li class="blue" ><a href="#">وبلاگ</a></li>
<li class="bright" ><a href="#">ارتباط با ما</a></li>
<li class="red" ><a href="#">راهنما</a></li>
</ul>
</div>
</body>
<!-- ******************** WWW.TarahSite.Net ******************** -->
</html>
بعد از ذخیره کردن فایل یک فایل دیگر از نوع css ایجاد کرده و کدهای زیر را در آن وارد نمایید:
@charset "utf-8";
/* www.tarahsite.net */
/**
*Name: Nice Menu
*Author: Tarah Site Group
**/
ul.nice-menu{
list-style:none;
margin-top:30px;
width:300px;
}
@-moz-keyframes expand{
۰% {
width:5px;
padding-left:0px;
}
۱۰۰%{width:200px;
padding-left:20px;
}
}
@-moz-keyframes expand-bounce{
۰% {
width:5px;
padding-left:0px;
}
۵۰%{
width:200px;
}
۷۰%{
width:170px;
}
۸۰%{
width:200px;
}
۹۰%{
width:190px;
}
۱۰۰%{
width:200px;
padding-left:20px;
}
}
@-webkit-keyframes expand {
۰% {
width: 5px;
padding-left: 0px;
}
۱۰۰% {
width: 200px;
padding-left: 20px;
}
}
@-webkit-keyframes expand-bounce {
۰% {
width: 5px;
padding-left: 0px;
}
۵۰% {
width: 200px;
}
۷۰% {
width: 170px;
}
۸۰% {
width: 200px;
}
۹۰% {
width: 190px;
}
۱۰۰% {
width: 200px;
padding-left: 20px;
}
}
@-moz-keyframes shrink{
۰%{
width:200px;
padding-left:20px;
}
۱۰۰%{
width:5px;
padding-left:0px;
}
}
@-moz-keyframes shrink-bounce{
۰% {
width:200px;
padding-left:20px;
}
۵۰%{
width:5px;
}
۷۰%{
width:35px;
}
۸۰%{
width:35px;
}
۹۰%{
width:15px;
}
۱۰۰%{
width:5px;
padding-left:0px;
}
}
@-webkit-keyframes shrink {
۰% {
width: 200px;
padding-left: 20px;
}
۱۰۰% {
width: 5px;
padding-left: 0px;
}
}
@-webkit-keyframes shrink-bounce {
۰% {
width: 200px;
padding-left: 20px;
}
۵۰% {
width: 5px;
}
۷۰% {
width: 35px;
}
۸۰% {
width: 5px;
}
۹۰% {
width: 15px;
}
۱۰۰% {
width: 5px;
padding-left: 0px;
}
}
ul.nice-menu li{
width:5px;
height:30px;
line-height:20px;
padding:0px 0px 0px 0px;
margin-top:3px;
background:transparent;
width:5px;
}
ul.nice-menu.tight li{
margin-top:0 !important;
}
ul.nice-menu li{
-moz-animation-name:shrink;
-moz-animation-duration:0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name:shrink;
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease-in-out;
}
ul.nice-menu.bounce li{
-moz-animation-name:shrink;
-moz-animation-duration:0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name:shrink;
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease-in-out;
}
ul.nice-menu li:hover{
width:200px;
padding-left:20px;
-moz-animation-name:expand;
-moz-animation-duration:0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name:expand;
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease-in-out;
}
ul.nice-menu.bounce li:hover{
width:200px;
padding-left:20px;
-moz-animation-name:expand;
-moz-animation-duration:0.5s;
-moz-animation-timing-function: ease-in-out;
-webkit-animation-name:expand;
-webkit-animation-duration:0.5s;
-webkit-animation-timing-function:ease-in-out;
}
ul.nice-menu a{
width:200px;
text-decoration:none;
font-size:14px;
color:#FFF;
text-shadow:0px 0px 3px #333;
font-weight:bold;
position:absolute;
padding:5px 0px;
padding-left:20px;
}
ul.nice-menu li.green{
background:rgb(107,186,112);
}
ul.nice-menu li.blue{
background:rgb(78,92,127);
}
ul.nice-menu li.orange{
background:rgb(216,121,40);
}
ul.nice-menu li.dark{
background:rgb(42,32,30);
}
ul.nice-menu li.red{
background:rgb(178,59,30);
}
ul.nice-menu li.bright{
background:rgb(241,249,210);
}
در انتها این فایل را ذخیره و فایل html را اجرا نمایید.
می توانید سورس کدهای بالا را از اینجا دانلود نمایید.
نمایش دمو