نویسنده : میدوری
میدوری
مدالهای میدوری
دسترسی به میدوری اطلاعات میدوری
تاریخ عضویت: 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 = "fa" >
<style type = "text/css" >
#menuContainer {width:750px; height:500px; background:url(fashion.jpg); position:relative;}
#verticalNav {position:absolute; left:5px; top:50px; margin:0; list-style:none; position:relative; font-family:verdana, sans-serif;float:left;
padding:150px 0 0 0;}
#verticalNav ul.toplevel {padding:0; margin:0; list-style:none;}
#verticalNav ul.sub {padding:0; margin:0; list-style:none;}
#verticalNav table {border-collapse:collapse; margin:-1px;}
#verticalNav ul.toplevel ul.sub {position:absolute; left:-9999px; width:173px;}
#verticalNav ul.toplevel ul div.base {position:absolute; left:-9999px; background:#fff; border:1px solid #ddd; padding:10px; width:350px;
height:300px;}
#verticalNav ul.toplevel ul div.border {position:absolute; left:-9999px; background:transparent url(backing.png); width:390px; height:340px;}
#verticalNav ul.toplevel {width:175px; border-top:1px solid #ddd;}
#verticalNav ul.toplevel li {float:left; width:175px;}
#verticalNav ul.toplevel li a {display:block; width:163px; padding-left:10px; height:22px; line-height:22px; text-decoration:none; color:#000;
font-size:11px; background:#eef0f0 url(arrow-black.gif) no-repeat 160px center; border:1px solid #ddd; border-width:0 1px 1px 1px;}
#verticalNav a:hover {white-space:nowrap;}
#verticalNav :hover ul.toplevel li a {background:#eee url(arrow-grey.gif) no-repeat 160px center; color:#444; filter:alpha(opacity=90); opacity:0.9;
}
#verticalNav ul.toplevel li a:hover {color:#069; background:#fff url(arrow-black.gif) no-repeat 160px center; filter:alpha(opacity=100); opacity:1.0;}
#verticalNav ul.toplevel li:hover > a {color:#069; background:#fff url(arrow-black.gif) no-repeat 160px center; filter:alpha(opacity=100); opacity:1.0;}
#verticalNav :hover ul.toplevel :hover ul.sub {left:174px; top:0; border-top:1px solid #ddd;}
#verticalNav :hover ul.toplevel :hover ul.pos1 {top:150px;}
#verticalNav :hover ul.toplevel :hover ul.pos2 {top:173px;}
#verticalNav :hover ul.toplevel :hover ul.pos3 {top:196px;}
#verticalNav :hover ul.toplevel :hover ul.pos4 {top:219px;}
#verticalNav :hover ul.toplevel :hover ul.pos5 {top:242px;}
#verticalNav :hover ul.toplevel :hover ul.pos6 {top:265px;}
#verticalNav :hover ul.toplevel :hover ul.pos7 {top:288px;}
#verticalNav :hover ul.toplevel :hover ul.pos8 {top:196px;}
#verticalNav :hover ul.toplevel :hover ul.pos9 {top:265px;}
#verticalNav :hover ul.toplevel :hover ul.pos10 {top:242px;}
#verticalNav :hover ul.toplevel :hover ul.sub li a {background:#eee; color:#000; filter:alpha(opacity=100); opacity:1.0;}
#verticalNav :hover ul.toplevel :hover ul.sub li a.sub2 {background:#eee url(arrow-black.gif) no-repeat 160px center; color:#000;}
#verticalNav :hover ul.toplevel :hover ul.sub li a:hover {background:#fff; color:#069;}
#verticalNav :hover ul.toplevel :hover ul.sub li a.sub2:hover {background:#fff url(arrow-black.gif) no-repeat 160px center; color:#069;}
#verticalNav :hover ul.toplevel :hover ul.sub li:hover > a.sub2 {background:#fff url(arrow-black.gif) no-repeat 160px center; color:#069;}
#verticalNav :hover ul.toplevel :hover ul.sub div.base {left:-9999px;}
#verticalNav :hover ul.toplevel :hover ul.sub div.border {left:-9999px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base {left:185px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.div1 {top:-92px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.div2 {top:-115px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.div3 {top:-207px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.div4 {top:-230px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.div5 {top:-137px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.div6 {top:-207px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.div7 {top:-185px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.border {left:175px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.b1 {top:-102px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.b2 {top:-125px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.b3 {top:-217px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.b4 {top:-240px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.b5 {top:-147px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.b6 {top:-217px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.b7 {top:-195px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px;
background:#fff url(dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base h4 {color:#888; font-size:13px; margin:0; padding:5px 0 5px 0;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base p {color:#555; font-size:11px; margin:0; padding:0 0 5px 0; line-height:18px;}
</style>
<div id = "menuContainer" >
<ul id = "verticalNav" >
<li>
<ul class ="toplevel">
<li> <a href = "#url" > Dresses</a>
<ul class ="sub pos1">
<li> <a class ="sub2" href="#url">Floral Print</a>
<div class ="border b1"></div>
<div class ="base div1">
<img src = "pic2.jpg" alt = "" />
<h4> Floral Print Dresses</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Floral Print One</a> </li>
<li> <a href = "#url" > Floral Print Two</a> </li>
<li> <a href = "#url" > Floral Print Three</a> </li>
</ul>
</div>
</li>
<li> <a class ="sub2" href="#url">Sleeveless</a>
<div class ="border b1"></div>
<div class ="base div1">
<img src = "pic1.jpg" alt = "" />
<h4> Sleeveless Dresses</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Sleeveless One</a> </li>
<li> <a href = "#url" > Sleeveless Two</a> </li>
<li> <a href = "#url" > Sleeveless Three</a> </li>
</ul>
</div>
</li>
<li> <a class ="sub2" href="#url">Pure Cotton</a>
<div class ="border b1"></div>
<div class ="base div1">
<img src = "pic3.jpg" alt = "" />
<h4> Pure Cotton Dresses</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Pure Cotton One</a> </li>
<li> <a href = "#url" > Pure Cotton Two</a> </li>
</ul>
</div>
</li>
<li> <a class ="sub2" href="#url">Linen Blend</a>
<div class ="border b1"></div>
<div class ="base div1">
<img src = "pic4.jpg" alt = "" />
<h4> Linen Blend Dresses</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Linen Blends One</a> </li>
<li> <a href = "#url" > Linen Blend Two</a> </li>
<li> <a href = "#url" > Linen Blend Three</a> </li>
</ul>
</div>
</li>
<li> <a class ="sub2" href="#url">Buttoned</a>
<div class ="border b1"></div>
<div class ="base div1">
<img src = "pic5.jpg" alt = "" />
<h4> Buttoned Dresses</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Buttoned One</a> </li>
<li> <a href = "#url" > Buttoned Two</a> </li>
<li> <a href = "#url" > Buttoned Three</a> </li>
</ul>
</div>
</li>
</ul>
</li>
<li> <a href = "#url" > Coats & Jackets</a>
<ul class ="sub pos2">
<li> <a href = "#url" > Silk Blend</a> </li>
<li> <a class ="sub2" href="#url">Cotton Rich</a>
<div class ="border b2"></div>
<div class ="base div2">
<img src = "pic2.jpg" alt = "" />
<h4> Cotton Rich</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Cotton Rich One</a> </li>
<li> <a href = "#url" > Cotton Rich Two</a> </li>
<li> <a href = "#url" > Cotton Rich Three</a> </li>
</ul>
</div>
</li>
<li> <a href = "#url" > Sleeveless</a> </li>
<li> <a href = "#url" > Pure Linen</a> </li>
</ul>
</li>
<li> <a href = "#url" > Jeans</a>
<ul class ="sub pos3">
<li> <a href = "#url" > Flared denim</a> </li>
<li> <a href = "#url" > Bootleg</a> </li>
<li> <a href = "#url" > Cropped</a> </li>
</ul>
</li>
<li> <a href = "#url" > Knitwear</a>
<ul class ="sub pos4">
<li> <a href = "#url" > Cardigans</a> </li>
<li> <a href = "#url" > Bolero</a> </li>
<li> <a href = "#url" > Plain long sleeve</a> </li>
</ul>
</li>
<li> <a href = "#url" > Shirts & Blouses</a>
<ul class ="sub pos5">
<li> <a href = "#url" > Pure Cotton</a> </li>
<li> <a href = "#url" > Pure Silk</a> </li>
<li> <a href = "#url" > Floral</a> </li>
</ul>
</li>
<li> <a href = "#url" > Skirts</a>
<ul class ="sub pos6">
<li> <a href = "#url" > Pleated</a> </li>
<li> <a class ="sub2" href="#url">Belted</a>
<div class ="border b3"></div>
<div class ="base div3">
<img src = "pic3.jpg" alt = "" />
<h4> Belted Skirts</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Belted Skirts One</a> </li>
<li> <a href = "#url" > Belted Skirts Two</a> </li>
<li> <a href = "#url" > Belted Skirts Three</a> </li>
</ul>
</div>
</li>
<li> <a href = "#url" > Panelled</a> </li>
<li> <a href = "#url" > Pencil</a> </li>
<li> <a href = "#url" > Flared</a> </li>
</ul>
</li>
<li> <a href = "#url" > Socks</a>
<ul class ="sub pos7">
<li> <a href = "#url" > Plain Cotton</a> </li>
<li> <a class ="sub2" href="#url">Trainer</a>
<div class ="border b4"></div>
<div class ="base div4">
<img src = "pic4.jpg" alt = "" />
<h4> Trainer Socks</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Trainer Socks One</a> </li>
<li> <a href = "#url" > Trainer Socks Two</a> </li>
<li> <a href = "#url" > Trainer Socks Three</a> </li>
</ul>
</div>
</li>
<li> <a href = "#url" > Sports</a> </li>
<li> <a href = "#url" > Soft Top</a> </li>
</ul>
</li>
<li> <a href = "#url" > Menswear</a>
<ul class ="sub pos8">
<li> <a href = "#url" > Three piece suits</a> </li>
<li> <a class ="sub2" href="#url">Coats</a>
<div class ="border b5"></div>
<div class ="base div5">
<img src = "pic5.jpg" alt = "" />
<h4> Three Piece Suits</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Three Piece Suits One</a> </li>
<li> <a href = "#url" > Three Piece Suits Two</a> </li>
<li> <a href = "#url" > Three Piece Suits Three</a> </li>
</ul>
</div>
</li>
<li> <a href = "#url" > Trousers</a> </li>
<li> <a href = "#url" > Shirts</a> </li>
<li> <a href = "#url" > Ties</a> </li>
<li> <a href = "#url" > Socks</a> </li>
<li> <a href = "#url" > Gloves</a> </li>
<li> <a href = "#url" > Scarves</a> </li>
</ul>
</li>
<li> <a href = "#url" > Kidswear</a>
<ul class ="sub pos9">
<li> <a class ="sub2" href="#url">Baby clothes</a>
<div class ="border b6"></div>
<div class ="base div6">
<img src = "pic7.jpg" alt = "" />
<h4> Baby Clothes</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Baby Clothes One</a> </li>
<li> <a href = "#url" > Baby Clothes Two</a> </li>
<li> <a href = "#url" > Baby Clothes Three</a> </li>
</ul>
</div>
</li>
<li> <a class ="sub2" href="#url">Socks</a>
<div class ="border b6"></div>
<div class ="base div6">
<img src = "pic8.jpg" alt = "" />
<h4> Kidswear Socks</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Kidswear Socks One</a> </li>
<li> <a href = "#url" > Kidswear Socks Two</a> </li>
<li> <a href = "#url" > Kidswear Socks Three</a> </li>
</ul>
</div>
</li>
<li> <a class ="sub2" href="#url">Outfits</a>
<div class ="border b6"></div>
<div class ="base div6">
<img src = "pic9.jpg" alt = "" />
<h4> Kidswear Outfits</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Kidswear Outfits One</a> </li>
<li> <a href = "#url" > Kidswear Outfits Two</a> </li>
<li> <a href = "#url" > Kidswear Outfits Three</a> </li>
</ul>
</div>
</li>
<li> <a class ="sub2" href="#url">T-Shirts</a>
<div class ="border b6"></div>
<div class ="base div6">
<img src = "pic10.jpg" alt = "" />
<h4> Kidswear T-Shirts</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Kidswear T-Shirts One</a> </li>
<li> <a href = "#url" > Kidswear T-Shirts Two</a> </li>
<li> <a href = "#url" > Kidswear T-Shirts Three</a> </li>
</ul>
</div>
</li>
<li> <a class ="sub2" href="#url">Footwear</a>
<div class ="border b6"></div>
<div class ="base div6">
<img src = "pic11.jpg" alt = "" />
<h4> Kidswear Footwear</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Kidswear Footwear One</a> </li>
<li> <a href = "#url" > Kidswear Footwear Two</a> </li>
<li> <a href = "#url" > Kidswear Footwear Three</a> </li>
</ul>
</div>
</li>
</ul>
</li>
<li> <a href = "#url" > Accessories</a>
<ul class ="sub pos10">
<li> <a href = "#url" > Scarves</a> </li>
<li> <a class ="sub2" href="#url">Rings</a>
<div class ="border b7"></div>
<div class ="base div7">
<img src = "jewelry.jpg" alt = "" />
<h4> Rings</h4>
<p> Some descriptive text can go here, and be as long as you like. This can be followed by a list of links or anything you want.</p>
<ul>
<li> <a href = "#url" > Rings One</a> </li>
<li> <a href = "#url" > Rings Two</a> </li>
<li> <a href = "#url" > Rings Three</a> </li>
</ul>
</div>
</li>
<li> <a href = "#url" > Necklaces</a> </li>
<li> <a href = "#url" > Earrings</a> </li>
<li> <a href = "#url" > Handbags</a> </li>
<li> <a href = "#url" > Belts</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</html> 1
( آخرین ویرایش در این ارسال: 05 - July - 2014 15 : 11 AM، توسط : میدوری .::. دلیل ویرایش: )
محل حضور کاربر در تالار : میدوری
ديدگاه کاربران برای مطلب : (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)
برچسب ها :
05 - July - 2014 13 : 11 AM
»
منوهایی زیبا برای سایت ها از آینده با CSS3 (مدل شصت و هفتم)
محفوظ است .
قدرت گرفته از 
.
پارسی سازی توسط 
:
:
:
