منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل پنجاه و نهم)
منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .
کد HTML:
<styletype="text/css">
.dropline {padding:0; margin:50px auto; list-style:none; height:50px; text-align:center; width:750px; position:relative; z-index:100;
font-family:arial, sans-serif; font-size:12px; position:relative; background:#fff; box-shadow:0 15px 10px -13px rgba(0,0,0,0.6);}
.dropline li {display:inline-block;}
.dropline li {*display:inline;}
.dropline li a {display:block; float:left; line-height:50px; padding:0 10px; background:#09c; color:#fff; text-decoration:none;
font-weight:bold; border-radius:10px 10px 0 0;}
.dropline li a:hover {color:#000;}
.dropline li a.sub {border-radius:10px 0 0 0; border-right:1px solid #036;}
.dropline ul {padding:0; margin:0; list-style:none; position:absolute; left:0px; width:750px; top:50px; text-align:center; height:0;
background:transparent; z-index:10; overflow:hidden;
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
}
.dropline ul li a {background:transparent; color:#666; font-size:15px; margin-top:-50px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
.dropline ul li a:hover {color:#c00;}
input.pop {position:absolute; left:-9999px;}
label.open {display:inline-block; width:30px; height:50px; background:#09c; margin:0; padding:0; position:relative; border-radius:0 10px 0 0;
border-left:1px solid #6cf;}
label.close {display:none; width:30px; height:50px; background:#c00; margin:0; padding:0; position:relative; border-radius:0 10px 0 0;
border-left:1px solid #e00;}
input#pop1:checked ~ .dropline li.p1 ul {height:50px;}
input#pop2:checked ~ .dropline li.p2 ul {height:50px;}
input#pop3:checked ~ .dropline li.p3 ul {height:50px;}
input#pop4:checked ~ .dropline li.p4 ul {height:50px;}
input#pop5:checked ~ .dropline li.p5 ul {height:50px;}
input#pop1:checked ~ .dropline li.p1 ul li a {margin-top:0;}
input#pop2:checked ~ .dropline li.p2 ul li a {margin-top:0;}
input#pop3:checked ~ .dropline li.p3 ul li a {margin-top:0;}
input#pop4:checked ~ .dropline li.p4 ul li a {margin-top:0;}
input#pop5:checked ~ .dropline li.p5 ul li a {margin-top:0;}
input#pop1:checked ~ .dropline li.p1 label.open {display:none;}
input#pop2:checked ~ .dropline li.p2 label.open {display:none;}
input#pop3:checked ~ .dropline li.p3 label.open {display:none;}
input#pop4:checked ~ .dropline li.p4 label.open {display:none;}
input#pop5:checked ~ .dropline li.p5 label.open {display:none;}
input#pop1:checked ~ .dropline li.p1 label.close {display:inline-block;}
input#pop2:checked ~ .dropline li.p2 label.close {display:inline-block;}
input#pop3:checked ~ .dropline li.p3 label.close {display:inline-block;}
input#pop4:checked ~ .dropline li.p4 label.close {display:inline-block;}
input#pop5:checked ~ .dropline li.p5 label.close {display:inline-block;}
</style><inputname="pop"id="pop1"class ="pop" type="radio">
<inputname="pop"id="pop2"class ="pop" type="radio">
<inputchecked="checked"name="pop"id="pop3"class ="pop" type="radio">
<inputname="pop"id="pop4"class ="pop" type="radio">
<inputname="pop"id="pop5"class ="pop" type="radio">
<inputname="pop"id="pop6"class ="pop" type="radio">
<ulclass ="dropline">
<li><ahref="#">HOME</a></li><liclass ="p1"><ahref="#"class ="sub">PRODUCTS</a><labelfor="pop1"class ="open" accesskey="2"><imgsrc="down.png"alt=""></label><labelfor="pop6"class ="close" accesskey="3"><imgsrc="up.png"alt=""></label><ul><li><ahref="#">Cameras</a></li><li><ahref="#">Lenses</a></li><li><ahref="#">Flashguns</a></li><li><ahref="#">Tripods</a></li><li><ahref="#">Filters</a></li><li><ahref="#">Lens Adaptors</a></li></ul></li><liclass ="p2"><ahref="#"class ="sub">SERVICES</a><labelfor="pop2"class ="open" accesskey="4"><imgsrc="down.png"alt=""></label><labelfor="pop6"class ="close" accesskey="5"><imgsrc="up.png"alt=""></label><ul><li><ahref="#">Printing</a></li><li><ahref="#">Servicing</a></li><li><ahref="#">Repair</a></li><li><ahref="#">Photo Editing</a></li><li><ahref="#">Photo Framing</a></li></ul></li><liclass ="p3"><ahref="#"class ="sub">SHOP</a><labelfor="pop3"class ="open" accesskey="6"><imgsrc="down.png"alt=""></label><labelfor="pop6"class ="close" accesskey="7"><imgsrc="up.png"alt=""></label><ul><li><ahref="#">Online Shopping</a></li><li><ahref="#">Mail Order</a></li><li><ahref="#">Store Finder</a></li><li><ahref="#">Second Hand & Refurbished Offers</a></li></ul></li><liclass ="p4"><ahref="#"class ="sub">SPECIAL DEALS</a><labelfor="pop4"class ="open" accesskey="8"><imgsrc="down.png"alt=""></label><labelfor="pop6"class ="close" accesskey="9"><imgsrc="up.png"alt=""></label><ul><li><ahref="#">Tripods</a></li><li><ahref="#">Filters</a></li><li><ahref="#">Lenses</a></li><li><ahref="#">Flashguns</a></li><li><ahref="#">Cameras</a></li></ul></li><liclass ="p5"><ahref="#"class ="sub">CONTACT US</a><labelfor="pop5"class ="open" accesskey="W"><imgsrc="down.png"alt=""></label><labelfor="pop6"class ="close" accesskey="X"><imgsrc="up.png"alt=""></label><ul><li><ahref="#">Email</a></li><li><ahref="#">Post</a></li><li><ahref="#">Fax</a></li><li><ahref="#">Telephone</a></li><li><ahref="#">SMS</a></li></ul></li><li><ahref="#">FORUM</a></li></ul>