نویسنده : میدوری
میدوری
مدالهای میدوری
دسترسی به میدوری اطلاعات میدوری
تاریخ عضویت: 05 November 2011
ارسال ها:
1,800
شماره کاربری:
1 میزان
اعتبار:
محل سکونت:
تهران
ماه تولد:
جنسيت:
آخرین دیدار :
تماس با میدوری
حالت میدوری صفحه های میدوری
منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل چهلم)
منو های زیبا و ابتکاری برای استفاده در سایت ها مدل هایی که بسیار ابتکاری هستند و رویایی و فقط با استفاده از کد های CSS3 . برای استفاده ابتدا نمونه ی زنده ی زیر را با مرورگرهای گوناگون ببینید و سپس در صورت علاقه مند شدن از کدهای داده شده استفاده کنید . تغییرات بعهده ی شماست .
کد PHP:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< style type= "text/css " >
#outer { width:729px ; height:360px ; background:#fff url( photographer1. jpg) ; border:1px solid #000 ; position:relative; color:#000 ; }
. menu, . menu ul { list - style- type:none; padding:0 ; margin:0 ; width:127px ; }
. menu { margin:100px 20px 80px 5px ; }
. menu { position:relative; float :left; }
* html . menu { position:static ; }
. menu li { display:block; float :left; width:125px ; background:#ddc; margin:2px 0 0 0 ; border:1px solid #000 ; border- color:#fff #000 #000 #fff; }
. menu li. sub { background:#89a ; }
. menu table { border- collapse:collapse; width:0 ; height:24px ; position:absolute; bottom: 0 ; top:auto; left:0 ; font- size:1em ; }
. menu li a { display:block; color:#000 ; font- family:arial, sans- serif; font- size:11px ; line- height:23px ; height:24px ; text- decoration:none;
text- indent:10px ; }
. menu a:hover { color:#bd4; background:#578 ; }
. menu :hover > a { color:#bd4; background:#578 ; }
. menu li. sub:hover,
. menu li. sub a:hover { position:relative; }
. menu ul,
. menu :hover ul ul,
. menu :hover ul :hover ul ul,
. menu :hover ul :hover ul :hover ul ul,
. menu :hover ul :hover ul :hover ul :hover ul ul { position:absolute; left:- 9999px ; width:128px ; top:0 ; }
. menu :hover ul,
. menu :hover ul :hover ul :hover ul,
. menu :hover ul :hover ul :hover ul :hover ul :hover ul { padding:20px 20px 20px 0 ; left:100px ; bottom:- 10px ; top:auto;
background:transparent url( trans. png) ; }
. menu :hover ul :hover ul,
. menu :hover ul :hover ul :hover ul :hover ul { padding:20px 20px 20px 0 ; left:100px ; top:- 10px ; bottom:auto; }
< /style>
< div id= "outer " >
< ul class = "menu " >
< li> < a href= "# " > Home< /a> < /li>
< li class = "sub " > < a href= "# " > Products< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li class = "sub " > < a href= "# " > Cameras< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > Nikon< /a> < /li>
< li> < a href= "# " > Minolta< /a> < /li>
< li> < a href= "# " > Pentax< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li class = "sub " > < a href= "# " > Lenses< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > Wide Angle< /a> < /li>
< li> < a href= "# " > Standard< /a> < /li>
< li> < a href= "# " > Telephoto< /a> < /li>
< li class = "sub " > < a href= "# " > Zoom< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > 35mm to 125mm < /a> < /li>
< li> < a href= "# " > 50mm to 250mm < /a> < /li>
< li> < a href= "# " > 125mm to 500mm < /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li> < a href= "# " > Mirror< /a> < /li>
< li class = "sub " > < a href= "# " > Non- standard< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > Bayonet mount< /a> < /li>
< li> < a href= "# " > Screw mount< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li> < a href= "# " > Flash Guns< /a> < /li>
< li> < a href= "# " > Tripods< /a> < /li>
< li> < a href= "# " > Filters< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li class = "sub " > < a href= "# " > Services< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > Printing< /a> < /li>
< li> < a href= "# " > Photo Framing< /a> < /li>
< li> < a href= "# " > Retouching< /a> < /li>
< li> < a href= "# " > Archiving< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li class = "sub " > < a href= "# " > Shop< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > Online< /a> < /li>
< li> < a href= "# " > Catalogue< /a> < /li>
< li> < a href= "# " > Mail Order< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li class = "sub p4 " > < a href= "# " > Contacts< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > Support< /a> < /li>
< li class = "sub " > < a href= "# " > Sales< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > USA< /a> < /li>
< li> < a href= "# " > Canadian< /a> < /li>
< li> < a href= "# " > South American< /a> < /li>
< li class = "sub " > < a href= "# " > European< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li class = "sub " > < a href= "# " > British< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > London< /a> < /li>
< li> < a href= "# " > Liverpool< /a> < /li>
< li> < a href= "# " > Glasgow< /a> < /li>
< li class = "sub " > < a href= "# " > Bristol< ! - - [ if IE 7 ] > < ! - - > < /a> < ! - - < ! [ endif ] - - >
< ! - - [ if lte IE 6 ] > < table> < tr> < td> < ! [ endif ] - - >
< ul>
< li> < a href= "# " > Redland< /a> < /li>
< li> < a href= "# " > Hanham< /a> < /li>
< li> < a href= "# " > Eastville< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li> < a href= "# " > Cardiff< /a> < /li>
< li> < a href= "# " > Belfast< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li> < a href= "# " > French< /a> < /li>
< li> < a href= "# " > German< /a> < /li>
< li> < a href= "# " > Spanish< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li> < a href= "# " > Canadian< /a> < /li>
< li> < a href= "# " > Asian< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li> < a href= "# " > Buying< /a> < /li>
< li> < a href= "# " > Photographers< /a> < /li>
< li> < a href= "# " > Stockist< /a> < /li>
< li> < a href= "# " > General< /a> < /li>
< /ul>
< ! - - [ if lte IE 6 ] > < /td> < /tr> < /table> < /a> < ! [ endif ] - - >
< /li>
< li> < a href= "# " > Privacy Policy< /a> < /li>
< /ul>
< /div> 1
محل حضور کاربر در تالار : میدوری
ديدگاه کاربران برای مطلب : (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)
برچسب ها :
14 - May - 2014 44 : 10 AM
»
منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل چهلم)
محفوظ است .
قدرت گرفته از 
.
پارسی سازی توسط 
:
:
:
