Creative-Blog

Yepyeni bir paylaşımla ile beraber yeniden sizlerleyiz. Geçen gün bir sitede gördüğüm ufak ekstra bir menünün benzerini tamamen kodlaması bana ayit olacak şekilde 5 farklı renkte kodladım. Bu ufak menülerin saydam olma özellikleri sayesinde görüntüleri güzelleşiyor.

Not: Kodları beyaz bir arkaplanda deneyip renklerini değiştirebilirsiniz. Değiştiremeyenler iletişim bölümünden bana ulaşırsa yardımcı olurum. =) 

Ekstra Menü Gri

• 
  Ana Sayfa
• 
  İletişim
• 
  Hakkımda
• 
  Yorumlar
• 
  Galeri
• 
  Arama

<style type="text/css"> #Gri-Eksrem-Menu { height: 85px; width: 540px; background-color: #dfdfdf; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; border: thin solid #818181; /* nice browsers */ background: rgba(223, 223, 223, 0.2); } #Gri-Eksrem-Menu ul li a { text-decoration: none; color: #000; display: block; width: 90px; text-align: center; font-family: Tahoma; height: 85px; font-size: 14px; } #Gri-Eksrem-Menu ul li a:hover { background-color: #C7C7C7; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; text-decoration: underline; background: rgba(131, 131, 131, 0.2); } #Gri-Eksrem-Menu ul { list-style-type: none; margin: 0px; float: none; padding: 0px; } #Gri-Eksrem-Menu ul li { float: left; text-align: center; } .Gri-Eksrem-Resim img { height: 45px; width: 45px; margin-top: 8px; margin-bottom: 5px; -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; z-index: 1; opacity: 0.9; } .Gri-Eksrem-Resim img:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } </style> <div id="Gri-Eksrem-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Gri-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" alt="" border="0" /></div>Ana Sayfa</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Gri-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" alt="" border="0"/></div>İletişim</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Gri-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" alt="" border="0" /></div>Hakkımda</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Gri-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" alt="" border="0" /></div>Yorumlar</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Gri-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" alt="" border="0"/></div>Galeri</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Gri-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" alt="" border="0"/></div>Arama</a></li> </ul> </div>

Ekstra Menü Kahverengi

• 
  Ana Sayfa
• 
  İletişim
• 
  Hakkımda
• 
  Yorumlar
• 
  Galeri
• 
  Arama

<style type="text/css"> #Kahve-Eksrem-Menu { height: 85px; width: 540px; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; border: thin solid #7d614a; background-color: #7d614a ; /* nice browsers */ background: rgba(125, 97, 74, 0.2); } #Kahve-Eksrem-Menu ul li a { text-decoration: none; color: #473729; display: block; width: 90px; text-align: center; font-family: Tahoma; height: 85px; font-size: 14px; } #Kahve-Eksrem-Menu ul li a:hover { background-color: #6D5541; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; text-decoration: underline; background: rgba(109, 85, 65, 0.1); } #Kahve-Eksrem-Menu ul { list-style-type: none; margin: 0px; float: none; padding: 0px; } #Kahve-Eksrem-Menu ul li { float: left; text-align: center; } .Kahve-Eksrem-Resim img { height: 45px; width: 45px; margin-top: 8px; margin-bottom: 5px; -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; z-index: 1; opacity: 0.9; } .Kahve-Eksrem-Resim img:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } </style> <div id="Kahve-Eksrem-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Kahve-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" alt="" border="0" /></div>Ana Sayfa</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Kahve-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" alt="" border="0"/></div>İletişim</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Kahve-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" alt="" border="0" /></div>Hakkımda</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Kahve-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" alt="" border="0" /></div>Yorumlar</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Kahve-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" alt="" border="0"/></div>Galeri</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Kahve-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" alt="" border="0"/></div>Arama</a></li> </ul> </div>

Ekstra Menü Mavi

• 
  Ana Sayfa
• 
  İletişim
• 
  Hakkımda
• 
  Yorumlar
• 
  Galeri
• 
  Arama

<style type="text/css"> #Mavi-Eksrem-Menu { height: 85px; width: 540px; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; border: thin solid #6a829e; background-color: #6a829e ; /* nice browsers */ background: rgba(106, 130, 158, 0.2); } #Mavi-Eksrem-Menu ul li a { text-decoration: none; color: #3D4B5F; display: block; width: 90px; text-align: center; font-family: Tahoma; height: 85px; font-size: 14px; } #Mavi-Eksrem-Menu ul li a:hover { background-color: #556982; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; text-decoration: underline; background: rgba(85, 105, 130, 0.2); } #Mavi-Eksrem-Menu ul { list-style-type: none; margin: 0px; float: none; padding: 0px; } #Mavi-Eksrem-Menu ul li { float: left; text-align: center; } .Mavi-Eksrem-Resim img { height: 45px; width: 45px; margin-top: 8px; margin-bottom: 5px; -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; z-index: 1; opacity: 0.9; } .Mavi-Eksrem-Resim img:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } </style> <div id="Mavi-Eksrem-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Mavi-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" alt="" border="0" /></div>Ana Sayfa</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Mavi-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" alt="" border="0"/></div>İletişim</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Mavi-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" alt="" border="0" /></div>Hakkımda</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Mavi-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" alt="" border="0" /></div>Yorumlar</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Mavi-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" alt="" border="0"/></div>Galeri</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Mavi-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" alt="" border="0"/></div>Arama</a></li> </ul> </div>

Ekstra Menü Yeşil

• 
  Ana Sayfa
• 
  İletişim
• 
  Hakkımda
• 
  Yorumlar
• 
  Galeri
• 
  Arama

<style type="text/css"> #Yesil-Eksrem-Menu { height: 85px; width: 540px; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; border: thin solid #629022; background-color: #629022 ; /* nice browsers */ background: rgba(98, 144, 34, 0.2); } #Yesil-Eksrem-Menu ul li a { text-decoration: none; color: #324912; display: block; width: 90px; text-align: center; font-family: Tahoma; height: 85px; font-size: 14px; } #Yesil-Eksrem-Menu ul li a:hover { background-color: #557D1E; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; text-decoration: underline; background: rgba(85, 125, 30, 0.2); } #Yesil-Eksrem-Menu ul { list-style-type: none; margin: 0px; float: none; padding: 0px; } #Yesil-Eksrem-Menu ul li { float: left; text-align: center; } .Yesil-Eksrem-Resim img { height: 45px; width: 45px; margin-top: 8px; margin-bottom: 5px; -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; z-index: 1; opacity: 0.9; } .Yesil-Eksrem-Resim img:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } </style> <div id="Yesil-Eksrem-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Yesil-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" alt="" border="0" /></div>Ana Sayfa</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Yesil-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" alt="" border="0"/></div>İletişim</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Yesil-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" alt="" border="0" /></div>Hakkımda</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Yesil-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" alt="" border="0" /></div>Yorumlar</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Yesil-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" alt="" border="0"/></div>Galeri</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Yesil-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" alt="" border="0"/></div>Arama</a></li> </ul> </div>

Ekstra Menü Turuncu

• 
  Ana Sayfa
• 
  İletişim
• 
  Hakkımda
• 
  Yorumlar
• 
  Galeri
• 
  Arama

<style type="text/css"> #Turunc-Eksrem-Menu { height: 85px; width: 540px; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; border: thin solid #de8226; background-color: #de8226; /* nice browsers */ background: rgba(222, 130, 38, 0.2); } #Turunc-Eksrem-Menu ul li a { text-decoration: none; color: #8A5015; display: block; width: 90px; text-align: center; font-family: Tahoma; height: 85px; font-size: 14px; } #Turunc-Eksrem-Menu ul li a:hover { background-color: #de8226; border-radius: 15px; /* Standart */ -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; text-decoration: underline; background: rgba(222, 130, 38, 0.2); } #Turunc-Eksrem-Menu ul { list-style-type: none; margin: 0px; float: none; padding: 0px; } #Turunc-Eksrem-Menu ul li { float: left; text-align: center; } .Turunc-Eksrem-Resim img { height: 45px; width: 45px; margin-top: 8px; margin-bottom: 5px; -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; z-index: 1; opacity: 0.9; } .Turunc-Eksrem-Resim img:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } </style> <div id="Turunc-Eksrem-Menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Turunc-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-home.png" alt="" border="0" /></div>Ana Sayfa</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Turunc-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-telephone.png" alt="" border="0"/></div>İletişim</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Turunc-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-card.png" alt="" border="0" /></div>Hakkımda</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Turunc-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-mail.png" alt="" border="0" /></div>Yorumlar</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Turunc-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-camera.png" alt="" border="0"/></div>Galeri</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#"><div class="Turunc-Eksrem-Resim"><img src="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/v1-search.png" alt="" border="0"/></div>Arama</a></li> </ul> </div>