Css Açılır Menü Hakkında

Stefua · 7 Eylül 2014

Arkadaşlar Bu vermiş olduğum kodlara açılır menüyü nasıl ekleyebilirim

Mesela Web Hosting Kısmına Geldiği zaman Linux Hosting , Reseller hosting gibi alt alta açılması için yardımcı olabilirmisiniz.

php olarak eklediğim kod

PHP:

<ul id="menu">
<li><a href="{$vurl}">Ana Sayfa</a></li>
<li><a href="{$vurl}alan-adi-hizmetleri.html">Alan Adı</a></li>
<li><a href="{$vurl}linux-web-hosting.html">Web Hosting</a></li>
<li><a href="{$vurl}sozlesme.html">Sözleşme</a></li>
<li><a href="{$vurl}iletisim.html">İletişim</a></li>
</ul>

css ekli olan kod

PHP:

#menu {
        background-color: #C9C299;
	padding: 1px;
	list-style-type: none;
        text-align: center;
}
#menu li {
	display: inline-block;
	width: 190px;
	position: relative;
}
#menu a {
	font-family: Arial;
	font-size: 15px;
	color: #FFF;
	text-decoration: none;
	background-color: #314c5f;
	display: block;
        padding-top: 5px;
	padding-right: 5px;
	border: 1px solid #9fb2bc;
	text-align: center;
	line-height: 30px;
        margin-right: 0px;
        border-radius:5px;
	<!--border-radius:5px;  İstenilirse menünün kenarları yuvarlak yapılabilir-->
}
#menu a:hover {
	background-color: #273c4c;
	color:#98a5af;
}

bekirkorkut · 25 Eylül 2014

acılır menu

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,*{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;display:block;color:#fff;}

/*menu*/
.nav_kapsayan{width:100%;height:70px;background:#365;}
ul.menu_kapsayan{width:980px;height:70px;margin:0 auto;}
ul.menu_kapsayan>li{float:left;position:relative;}
ul.menu_kapsayan>li>a{padding:0 10px;background:#456;font-size:18px;height:70px;line-height:70px;border-right:1px solid #fff;}
ul.menu_kapsayan>li:last-child>a{border-right:none;}
ul.menu_kapsayan>li>a:hover{background:#455;}
ul.menu_kapsayan>li>ul{display:none;position:absolute;width:100px;background:#365;z-index:9;}
ul.menu_kapsayan>li:hover>ul{display:block;}
ul.menu_kapsayan>li>ul>li{width:100%;text-align:center;}
ul.menu_kapsayan>li>ul>li>a{width:100%;background:#456;font-size:15px;height:50px;line-height:50px;border-bottom:1px solid #fff;}
ul.menu_kapsayan>li>ul>li>a:hover{background:#455;}
</style>
</head>
<body>
<nav class="nav_kapsayan">
<ul class="menu_kapsayan">
<li><a href="#">menu 1</a></li>
<li><a href="#">menu 2</a>
<ul>
<li><a href="#">alt menu 1</a></li>
<li><a href="#">alt menu 2</a></li>
</ul>
</li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4</a>
<ul>
<li><a href="#">alt menu 1</a></li>
<li><a href="#">alt menu 2</a></li>
</ul>
</li>
<li><a href="#">menu 5</a></li>
<li><a href="#">menu 6</a>
<ul>
<li><a href="#">alt menu 1</a></li>
<li><a href="#">alt menu 2</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

Css Açılır Menü Hakkında

Stefua

0

bekirkorkut

0

Backlink ve Tanıtım Yazısı için iletişime geçmek için Skype Adresimiz: .cid.1580508955483fe5