شما میتوانید پس از نام نویسی از تمام امکانات انجمن ها استفاده کنید . توجه داشته باشید که , واژه های ممنوع و یا بی معنی ( شماره
و یا واژه تصادفی ) را بکار نبرید . برای نام نویسی در تالار میدوری و یا ورود کلیک کنید .
منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل شصت و سوم)
منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل شصت و سوم)
منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .
کد HTML:
<styletype="text/css">
/* fix for the iPad/iPhone/iPod Touch :active: with sibling selectors */
.menu:active {}
.menu, .menu ul {padding:0; margin:0; list-style:none; position:relative;}
.menu {width:726px; margin:0 auto;}
.menu li {float:left; width:120px; height:35px; position:relative; margin-right:1px;}
.menu li a {display:block; height:34px; width:110px; padding-left:10px; margin-bottom:1px; color:#000;
font:bold 12px/34px arial, sans-serif; text-decoration:none; background:#ddd; border-radius: 8px; outline:0;}
.menu li a.hasSibling {background:#ddd url(arrow.gif) no-repeat 100px center;}
.menu ul li {margin-top:-35px;}
.menu li a + img {width:120px; height:34px; position:absolute; left:0; top:0; display:none; cursor:pointer;}
.menu li a:active,
.menu li a:focus {background-color:#6cf;}
.menu li a.hasSibling:active,
.menu li a.hasSibling:focus {background:#6cf url(arrow-up.gif) no-repeat 100px center;;}
.menu {z-index:100;}
.menu > li {z-index:20;}
.menu > li > a {z-index:100;}
.menu > li ul {z-index:-1;}
.menu ul li:nth-of-type(1) {z-index:20;
-moz-transition: 0.1s linear 0.5s;
-ms-transition: 0.1s linear 0.5s;
-o-transition: 0.1s linear 0.5s;
-webkit-transition: 0.1s linear 0.5s;
transition: 0.1s linear 0.5s;
}
.menu ul li:nth-of-type(2) {z-index:19;
-moz-transition: 0.1s linear 0.4s;
-ms-transition: 0.1s linear 0.4s;
-o-transition: 0.1s linear 0.4s;
-webkit-transition: 0.1s linear 0.4s;
transition: 0.1s linear 0.4s;
}
.menu ul li:nth-of-type(3) {z-index:18;
-moz-transition: 0.1s linear 0.3s;
-ms-transition: 0.1s linear 0.3s;
-o-transition: 0.1s linear 0.3s;
-webkit-transition: 0.1s linear 0.3s;
transition: 0.1s linear 0.3s;
}
.menu ul li:nth-of-type(4) {z-index:17;
-moz-transition: 0.1s linear 0.2s;
-ms-transition: 0.1s linear 0.2s;
-o-transition: 0.1s linear 0.2s;
-webkit-transition: 0.1s linear 0.2s;
transition: 0.1s linear 0.2s;
}
.menu ul li:nth-of-type(5) {z-index:16;
-moz-transition: 0.1s linear 0.1s;
-ms-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
-webkit-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.menu ul li:nth-of-type(6) {z-index:15;
-moz-transition: 0.1s linear 0s;
-ms-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
-webkit-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.menu li a:active ~ ul li,
.menu li a:focus ~ ul li {margin-top:0;}
.menu li a:active + img,
.menu li a:focus + img {display:block;}
.menu li a:active ~ ul li:nth-of-type(1),
.menu li a:focus ~ ul li:nth-of-type(1) {margin-top:0;
-moz-transition: 0.1s linear 0s;
-ms-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
-webkit-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.menu li a:active ~ ul li:nth-of-type(2),
.menu li a:focus ~ ul li:nth-of-type(2) {margin-top:0;
-moz-transition: 0.1s linear 0.1s;
-ms-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
-webkit-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.menu li a:active ~ ul li:nth-of-type(3),
.menu li a:focus ~ ul li:nth-of-type(3) {margin-top:0;
-moz-transition: 0.1s linear 0.2s;
-ms-transition: 0.1s linear 0.2s;
-o-transition: 0.1s linear 0.2s;
-webkit-transition: 0.1s linear 0.2s;
transition: 0.1s linear 0.2s;
}
.menu li a:active ~ ul li:nth-of-type(4),
.menu li a:focus ~ ul li:nth-of-type(4) {margin-top:0;
-moz-transition: 0.1s linear 0.3s;
-ms-transition: 0.1s linear 0.3s;
-o-transition: 0.1s linear 0.3s;
-webkit-transition: 0.1s linear 0.3s;
transition: 0.1s linear 0.3s;
}
.menu li a:active ~ ul li:nth-of-type(5),
.menu li a:focus ~ ul li:nth-of-type(5) {margin-top:0;
-moz-transition: 0.1s linear 0.4s;
-ms-transition: 0.1s linear 0.4s;
-o-transition: 0.1s linear 0.4s;
-webkit-transition: 0.1s linear 0.4s;
transition: 0.1s linear 0.4s;
}
.menu li a:active ~ ul li:nth-of-type(6),
.menu li a:focus ~ ul li:nth-of-type(6) {margin-top:0;
-moz-transition: 0.1s linear 0.5s;
-ms-transition: 0.1s linear 0.5s;
-o-transition: 0.1s linear 0.5s;
-webkit-transition: 0.1s linear 0.5s;
transition: 0.1s linear 0.5s;
}
</style><br><br><ulclass ="menu">
<li><ahref="#">Home</a></li><li><aclass ="hasSibling" href="#url" tabindex="1">Products</a><imgsrc="blank.gif"alt=""><ul><li><ahref="#">Digital Cameras</a></li><li><ahref="#">Tripods</a></li><li><ahref="#">Flashguns</a></li><li><ahref="#">Lenses</a></li></ul></li><li><aclass ="hasSibling" href="#url" tabindex="1">Services</a><imgsrc="blank.gif"alt=""><ul><li><ahref="#">Enlarging</a></li><li><ahref="#">Framing</a></li><li><ahref="#">Printing</a></li><li><ahref="#">Copying</a></li><li><ahref="#">Sepia Toning</a></li></ul></li><li><aclass ="hasSibling" href="#url" tabindex="1">Outlets</a><imgsrc="blank.gif"alt=""><ul><li><ahref="#">London</a></li><li><ahref="#">Gloucestershire</a></li><li><ahref="#">East Midlands</a></li><li><ahref="#">Glasgow</a></li></ul></li><li><aclass ="hasSibling" href="#url" tabindex="1">Terms</a><imgsrc="blank.gif"alt=""><ul><li><ahref="#">Payment</a></li><li><ahref="#">Conditions</a></li><li><ahref="#">Privacy</a></li></ul></li><li><ahref="#">Site Map</a></li></ul><divstyle="height:300px"></div>
محل حضور کاربر در تالار : میدوری در تالار ميدوری حضور ندارد .
ديدگاه کاربران برای مطلب : (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)