CSS based hotizontal menu
Creating to Css based horizontal menu like above.You copy/paste following code into your .css files or head tags of .html file.
#menuh
{
padding:5px;
height:30px;
width:auto;
background-color: #7cc576;
}
#menuh ul{
margin:0;
margin-left: 10px;
padding: 0;
list-style: none;
}
#menuh li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}
#menuh a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
padding:5px 10px 5px 10px;
background-color: #7cc576;
border:solid 1px #7cc576;
}
#menuh a:hover{
background-color: #3cb878;
color: white;
border:solid 1px #00a651;
}
#menuh
{
padding:5px;
height:30px;
width:auto;
background-color: #7cc576;
}
#menuh ul{
margin:0;
margin-left: 10px;
padding: 0;
list-style: none;
}
#menuh li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}
#menuh a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
padding:5px 10px 5px 10px;
background-color: #7cc576;
border:solid 1px #7cc576;
}
#menuh a:hover{
background-color: #3cb878;
color: white;
border:solid 1px #00a651;
}
Css ile yatay menü yapmak (Digg menüleri gibi)
Yukarda görmüş olduğunuz gibi bir menü yapmak için aşağıdaki kodları .css dosyanızın içine veya html kodunuzun head taglarının içine yapıştırın.
#menuh
{
padding:5px;
height:30px;
width:auto;
background-color: #7cc576;
}
#menuh ul{
margin:0;
margin-left: 10px;
padding: 0;
list-style: none;
}
#menuh li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}
#menuh a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
padding:5px 10px 5px 10px;
background-color: #7cc576;
border:solid 1px #7cc576;
}
#menuh a:hover{
background-color: #3cb878;
color: white;
border:solid 1px #00a651;
}
#menuh
{
padding:5px;
height:30px;
width:auto;
background-color: #7cc576;
}
#menuh ul{
margin:0;
margin-left: 10px;
padding: 0;
list-style: none;
}
#menuh li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
}
#menuh a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
padding:5px 10px 5px 10px;
background-color: #7cc576;
border:solid 1px #7cc576;
}
#menuh a:hover{
background-color: #3cb878;
color: white;
border:solid 1px #00a651;
}
Kaydol:
Kayıtlar (Atom)
Popüler Yayınlar
-
(Yeni) Online Link Üretecini kullanabilirsiniz. Herhangi bir yazıya link vermek için html dilinin < a > tag elementi kullanılır. ...
-
Ö ncelikle şunu belirtelim ki HTML'de bir yazı dediğimiz şey ya bir paragraf (P) , header (H) , bir link (a) v.b. olabilir , bunların ...
-
E ğer Ethernet Teknolojisini kullanarak bir LAN (Local Area Network-Yerel Alan Ağı) kuracaksak;bilgisayar , yazıcı , server (sunucu) gibi ci...
-
Halihazırda kurulmuş olan Windows XP nizin şifresini (Serial veya CD-KEY) kaybettiyseniz bu program size yardımcı olacaktır. Ayrıca bu progr...
-
P ing basit manada bir network programıdır.Yani aslında ping bir komut değil bir yazılımdır. Peki ping ne işe yarar ne zaman kulla...
-
OSI: Open Systems Interconnection = Birbiriyle bağlantılı açık sistemler standardı. Günümüzde kullanılan hemen hemen tüm ağlar çeşitli ...
-
"Disk dolu veya yazmaya karşı korumalı" hatası USB Bellek veya Bellek Kartlarımızda sıklıkla karşılaştığımız sorular arasındadır. ...
-
Çoğumuzun başına gelmiştir.Bir karakter yazmak istemişiz fakat bir türlü klavyede yerini bulamamışızdır.İnternet aleminde çok sayıda ascii k...
-
O rta düzey bir bilgisayar kullanıcısının en çok kullandığı programlarından bir tanesi Çalıştır (RUN) programıdır. Bu windows programı say...
-
Özellikle css ile yeni tanışan arkadaşların sıkıntısı padding ve margin özellikleridir. Aslında bu iki özellikte sayfa elementin...