Css Parlayan Yeşil Menü

0
82
Okunma

yesil menu Css Parlayan Yeşil Menü

Css hover kullanarak bir menü daha hazırladık. menümüz yine 2 adet farklı resimden oluşmaktabiri koyu diğeri ondan biraz daha açık resimdede farketmişsinizdir. Menümüzün demosuna ve html kodlar hakkında gerekli açıklamaları aşağıda verdiğim demo adresinden bulabilirsiniz.

1111111111 demo buton Css Parlayan Yeşil Menü

Kullanım

Css :

<style type="text/css" media="screen">
<!--
#plus .yesil a#menu-demo h1 { font-size: 20px; font-weight: bold;  margin: 0; padding: 0 }
#plus .yesil a#menu-demo                               { color: #000; font-size: 10px; line-height: normal; text-decoration: none; background-image: url(http://mintik.com/upload/demolar/cssmenu/img/koyu_yesil_mintikcom.PNG); background-repeat: no-repeat; background-attachment: inherit; background-position: 0 top; cursor: pointer; display: block; padding: 0 25px; width: 200px }
#plus .yesil  { width: 276px; float: none }
#plus .yesil a:hover#menu-demo                         { color: #063; font-size: 10px; line-height: normal; text-decoration: none; background-image: url(http://mintik.com/upload/demolar/cssmenu/img/acik_yesil_mintikcom.PNG); background-repeat: no-repeat; background-attachment: inherit; background-position: 0 top; display: block; padding-right: 25px; padding-left: 25px; width: 200px }
--></style>

Html :

<div id="menu">
			<div class="plus">

			</div>
		</div>
		<div id="plus">
			<div class="yesil">
				<a id="menu-demo" href="http://mintik.com">
					<h1>Anasayfa</h1>

</a> 
<a id="menu-demo" href="http://mintik.com"> 
<h1>Blog</h1> 
</a> 
<a id="menu-demo" href="http://mintik.com/?page_id=647"> 
<h1>Forum</h1> 
</a> 
<a id="menu-demo" href="http://mintik.com/?page_id=972"> 
<h1>Mesaj</h1> 
</a><a id="menu-demo" href="http://mintik.com/?page_id=753"> 
<h1>Link Ekle</h1> 
</a><a id="menu-demo" href="http://mintik.com/?page_id=759">
				<h1>Hakıkda</h1>
			</a><a id="menu-demo" href="http://mintik.com/?page_id=755">
				<h1>İletişim</h1>
			</a><a id="menu-demo" href="http://mintik.com/?feed=rss2"> 
<h1>Rss</h1> 
</a> 
</div>

 

CEVAP VER

Lütfen yorumunuzu girin!
Please enter your name here