نویسنده : میدوری
میدوری
مدالهای میدوری
دسترسی به میدوری اطلاعات میدوری
تاریخ عضویت: 05 November 2011
ارسال ها:
1,800
شماره کاربری:
1 میزان
اعتبار:
محل سکونت:
تهران
ماه تولد:
جنسيت:
آخرین دیدار :
تماس با میدوری
حالت میدوری صفحه های میدوری
منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل شصت و پنجم)
منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .
کد HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" >
<head>
<title> </title>
</head>
<style>
#nav,#nav ul {
background-color: #8899AA;
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
display: block;
padding: 5px;
position: relative;
width: 112px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#nav ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
-ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
-o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
-webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav li {
background-color: #FFFFFF;
position: relative;
}
#nav > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav li a {
background-color: #AABBCC;
border-color: #DDDDDD #555555 #555555 #DDDDDD;
border-style: solid;
border-width: 1px;
color: #000000;
display: block;
font-size: 15px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width:95px;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
#nav li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
color: #FFFFFF;
}
#nav li:hover ul.subs {
left: 114px;
opacity:1;
top: 0;
-moz-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav ul li {
width: 100%;
}
/* colors */
.colorScheme {
list-style: none outside none;
overflow: hidden;
width: 120px;
}
.colorScheme a {
cursor: pointer;
float: left;
height: 30px;
margin: 0 5px 5px;
width: 30px;
}
.colorScheme .clr1 {
background-color: #8899AA;
}
.colorScheme .clr2 {
background-color: #aa889e;
}
.colorScheme .clr3 {
background-color: #8f88aa;
}
.colorScheme .clr4 {
background-color: #88aaaa;
}
.colorScheme .clr5 {
background-color: #88aa8a;
}
.colorScheme .clr6 {
background-color: #aaa188;
}
#clr1:target ~ #nav, #clr1:target ~ #nav ul {
background-color: #8899AA;
}
#clr2:target ~ #nav, #clr2:target ~ #nav ul {
background-color: #aa889e;
}
#clr3:target ~ #nav, #clr3:target ~ #nav ul {
background-color: #8f88aa;
}
#clr4:target ~ #nav, #clr4:target ~ #nav ul {
background-color: #88aaaa;
}
#clr5:target ~ #nav, #clr5:target ~ #nav ul {
background-color: #88aa8a;
}
#clr6:target ~ #nav, #clr6:target ~ #nav ul {
background-color: #aaa188;
}
#clr1:target ~ #nav li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
}
#clr2:target ~ #nav li:hover > a {
background-color: #aa889e;
border-color: #aa889e;
}
#clr3:target ~ #nav li:hover > a {
background-color: #8f88aa;
border-color: #8f88aa;
}
#clr4:target ~ #nav li:hover > a {
background-color: #88aaaa;
border-color: #88aaaa;
}
#clr5:target ~ #nav li:hover > a {
background-color: #88aa8a;
border-color: #88aa8a;
}
#clr6:target ~ #nav li:hover > a {
background-color: #aaa188;
border-color: #aaa188;
}
</style>
<body>
<div class ="container">
<span id = "clr1" > </span>
<span id = "clr2" > </span>
<span id = "clr3" > </span>
<span id = "clr4" > </span>
<span id = "clr5" > </span>
<span id = "clr6" > </span>
<div class ="colorScheme">
<a href = "#clr1" > </a>
<a href = "#clr2" > </a>
<a href = "#clr3" > </a>
<a href = "#clr4" > </a>
<a href = "#clr5" > </a>
<a href = "#clr6" > </a>
</div>
<ul id = "nav" >
<li> <a href = "http://www.script-tutorials.com/" > Home</a> </li>
<li> <a href = "#" > Menu 1</a>
<ul class ="subs">
<li> <a href = "#" > Submenu 1</a> </li>
<li> <a href = "#" > Submenu 2</a> </li>
<li> <a href = "#" > Submenu 3</a> </li>
<li> <a href = "#" > Submenu 4</a> </li>
<li> <a href = "#" > Submenu 5</a> </li>
</ul>
</li>
<li> <a href = "#" > Menu 2</a>
<ul class ="subs">
<li> <a href = "#" > Submenu 2-1</a> </li>
<li> <a href = "#" > Submenu 2-2</a> </li>
<li> <a href = "#" > Submenu 2-3</a> </li>
<li> <a href = "#" > Submenu 2-4</a> </li>
<li> <a href = "#" > Submenu 2-5</a> </li>
<li> <a href = "#" > Submenu 2-6</a> </li>
<li> <a href = "#" > Submenu 2-7</a> </li>
<li> <a href = "#" > Submenu 2-8</a> </li>
</ul>
</li>
<li> <a href = "#" > Menu 3</a>
<ul class ="subs">
<li> <a href = "#" > Submenu 3-1</a> </li>
<li> <a href = "#" > Submenu 3-2</a> </li>
<li> <a href = "#" > Submenu 3-3</a> </li>
<li> <a href = "#" > Submenu 3-4</a> </li>
<li> <a href = "#" > Submenu 3-5</a> </li>
</ul>
</li>
<li> <a href = "#" > Menu 4</a> </li>
<li> <a href = "#" > Menu 5</a> </li>
<li> <a href = "#" > Menu 6</a> </li>
<li> <a href = "#" > Back</a> </li>
</ul>
</div>
</body>
</html> 1
محل حضور کاربر در تالار : میدوری
ديدگاه کاربران برای مطلب : (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)
برچسب ها :
12 - June - 2014 53 : 11 PM
»
منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل شصت و پنجم)
محفوظ است .
قدرت گرفته از 
.
پارسی سازی توسط 
:
:
:
