Creative-Blog

Creative-Blog özgün paylaşımlarına devam ediyooooor! Bu sefer karşınıza bir menü paylaşımıyla çıktım. Özellikle sağ-sol ve farklı 5 renkte olmalarıyla her tasarıma uyarlanabilir ve kullanılarbilirler. Bu menüler basit css menülerdir ve içerisinde karışık hiçbir kod bulunmamaktadır...  

Gri Aç-Kapa Menü

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/c/creative-blog/on-off-menugri.png); margin-bottom: 1px; } #grimenu ul li a:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/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/c/creative-blog/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/c/creative-blog/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>

Kahverengi Aç-Kapa Menü

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/c/creative-blog/on-off-menukahve.png); margin-bottom: 1px; } #kahvemenu ul li a:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/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/c/creative-blog/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/c/creative-blog/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>

Mavi Aç-Kapa Menü

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/c/creative-blog/on-off-menumavi.png); margin-bottom: 1px; } #mavimenu ul li a:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/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/c/creative-blog/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/c/creative-blog/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>

Yeşil Aç-Kapa Menü

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/c/creative-blog/on-off-menuyesil.png); margin-bottom: 1px; } #yesilmenu ul li a:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/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/c/creative-blog/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/c/creative-blog/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>

Turuncu Aç-Kapa Menü

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/c/creative-blog/on-off-menuturunc.png); margin-bottom: 1px; } #turuncmenu ul li a:hover { background-image: url(https://img.webme.com/pic/c/creative-blog/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/c/creative-blog/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/c/creative-blog/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>