OyunlarBilecik

Sol Ve Sağ Aç Kapa Menü

Sol Ve Sağ Aç/Kapa Menüler

Evet şimdide bir menü paylaşımıyla karşınızdayız... Geçen gün farklı bir şeyler paylaşıyım diye düşünürken aklıma böyle menüler yapmak geldi. Bende hiç beklemedim tabi açtım photoshop'u 5 renkte Sağ ve Sol olmak üzere 2 grupta aynı özelliklere sahip menüler yaptım... Umarım beyenirsiniz ve umarım işinize yarar.

Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek	Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek
<style type="text/css">#grimenu { width: 250px; } #grimenu ul { list-style-type: none; margin: 0px; padding: 0px; } #grimenu ul li a { text-decoration: none; color: #CCC; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; padding-left: 8px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menugri.png); margin-bottom: 1px; } #grimenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menugrihv.png); } </style></div> <div id="grimenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>	<style type="text/css"> #v1grimenu { width: 250px; } #v1grimenu ul { list-style-type: none; margin: 0px; padding: 0px; } #v1grimenu ul li a { text-decoration: none; color: #CCC; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menugri.png); margin-bottom: 1px; text-align: right; padding-right: 8px; } #v1grimenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menugrihv.png); } </style></div> <div id="v1grimenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>
Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek	Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek
<style type="text/css"> #kahvemenu { width: 250px; } #kahvemenu ul { list-style-type: none; margin: 0px; padding: 0px; } #kahvemenu ul li a { text-decoration: none; color: #805936; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; padding-left: 8px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menukahve.png); margin-bottom: 1px; } #kahvemenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menukahvehv.png); } </style></div> <div id="kahvemenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>	<style type="text/css"> #v1kahvemenu { width: 250px; } #v1kahvemenu ul { list-style-type: none; margin: 0px; padding: 0px; } #v1kahvemenu ul li a { text-decoration: none; color: #805936; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menukahve.png); margin-bottom: 1px; text-align: right; padding-right: 8px; } #v1kahvemenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menukahvehv.png); } </style></div> <div id="v1kahvemenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>
Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek	Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek
<style type="text/css"> #mavimenu { width: 250px; } #mavimenu ul { list-style-type: none; margin: 0px; padding: 0px; } #mavimenu ul li a { text-decoration: none; color: #CCC; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; padding-left: 8px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menumavi.png); margin-bottom: 1px; } #mavimenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menumavihv.png); } </style></div> <div id="mavimenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>	<style type="text/css"> #v1mavimenu { width: 250px; } #v1mavimenu ul { list-style-type: none; margin: 0px; padding: 0px; } #v1mavimenu ul li a { text-decoration: none; color: #CCC; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menumavi.png); margin-bottom: 1px; text-align: right; padding-right: 8px; } #v1mavimenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menumavihv.png); } </style></div> <div id="v1mavimenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>
Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek	Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek
<style type="text/css"> #yesilmenu { width: 250px; } #yesilmenu ul { list-style-type: none; margin: 0px; padding: 0px; } #yesilmenu ul li a { text-decoration: none; color: #4E7616; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; padding-left: 8px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menuyesil.png); margin-bottom: 1px; } #yesilmenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menuyesilhv.png); } </style></div> <div id="yesilmenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>	<style type="text/css"> #v1yesilmenu { width: 250px; } #v1yesilmenu ul { list-style-type: none; margin: 0px; padding: 0px; } #v1yesilmenu ul li a { text-decoration: none; color: #4E7616; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menuyesil.png); margin-bottom: 1px; text-align: right; padding-right: 8px; } #v1yesilmenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menuyesilhv.png); } </style></div> <div id="v1yesilmenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>
Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek	Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek Eklenecek
<style type="text/css"> #turuncmenu { width: 250px; } #turuncmenu ul { list-style-type: none; margin: 0px; padding: 0px; } #turuncmenu ul li a { text-decoration: none; color: #BA5E18; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; padding-left: 8px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menuturunc.png); margin-bottom: 1px; } #turuncmenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/on-off-menuturunchv.png); } </style></div> <div id="turuncmenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>	<style type="text/css"> #v1turuncmenu { width: 250px; } #v1turuncmenu ul { list-style-type: none; margin: 0px; padding: 0px; } #v1turuncmenu ul li a { text-decoration: none; color: #BA5E18; font-family: Tahoma, Geneva, sans-serif; display: block; height: 21px; width: 242px; padding-top:4px; background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menuturunc.png); margin-bottom: 1px; text-align: right; padding-right: 8px; } #v1turuncmenu ul li a:hover { background-image: url(https://img.webme.com/pic/o/oyunlarbilecik2/v1on-off-menuturunchv.png); } </style></div> <div id="v1turuncmenu"> <ul> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> <li><a href="#" _fcksavedurl="#">Eklenecek</a></li> </ul> </div>

Sol Ve Sağ Aç Kapa Menü