Sadece CSS ile Yatay Menü

Vatanay Özbeyli CSS3, Tasarım Unsurları

CSS Yatay Menü

Merhaba arkadaşlar, bu makalemde sizlerle birlikte bütün cihazlarda sorunsuz görüntülenebilen (responsive) yatay bir menü örneği hazırlayacağız. Yukarıda önizlemesini görüntülediğiniz bu tasarımı canlı olarak test etmek için aşağıdaki “Örneği Görüntüle” linkinden faydalanabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

Nasıl Yapılır

İlk olarak <head></head> tagları arasına aşağıdaki kod satırını eklemekle başlıyoruz.

<meta name="viewport" content="width=device-width">

Böylece menümüz görüntülendiği cihazın ekran genişliği kadar genişleyecek. Bu işlemi de kalite kaybetmeden yapacak.

Sırada <body></body> tagı arasında, menümüzün görüntülenmesini istediğimiz yere yapıştıracağınız HTML Kodları var.


<head>
<meta name="viewport" content="width=device-width">
</head>
<div class="nav-wrapper">
<span class="dekor"></span>
<nav>
<ul class="menubar">
<li>
<a href="">Adobe</a>
<ul class="alt-menu">
<li><a href="">Photoshop</a></li>
<li><a href="">Flash</a></li>
<li><a href="">After Effects</a></li>
<li><a href="">In Design</a></li>
</ul>
</li>
<li>
<a href="">WordPress</a>
<ul class="alt-menu">
<li><a href="">Plugins</a></li>
<li><a href="">Themes</a></li>
<li><a href="">Tips</a></li>
</ul>
</li>
<li>
<a href="">New Design</a>
<ul class="alt-menu">
<li><a href="">HTML5</a></li>
<li><a href="">CSS3</a></li>
<li><a href="">SEO</a></li>
</ul>
</li>
<li>
<a href="">Tutorials</a>
<ul class="alt-menu">
<li><a href="">Text Based</a></li>
<li><a href="">Videos</a></li>
<li><a href="">Articles</a></li>
</ul>
</li>
<li>
<a href="">Contact Us</a>
<ul class="alt-menu">
<li><a href="">E-Mail</a></li>
<li><a href="">Telephone</a></li>
<li><a href="">Fax</a></li>
<li><a href="">Location</a></li>
</ul>
</li>
</ul>
</nav>
</div>

Şimdi son olarak CSS Kodları ile tasarımımızı tamamlıyoruz.


body {
line-height:1.4em;
letter-spacing: -0.5px;
font:12px "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
text-transform: uppercase;
text-align: center;
}

.nav-wrapper {
display: inline-block;
margin-top: 40px;
}

/* Sidebar'ın üst kısmını renklendiriyoruz. */
.dekor {
background: -webkit-linear-gradient(left, #4b8ac0 50%, cyan 50%);
background: -moz-linear-gradient(left, white 50%, cyan 50%);
background: -o-linear-gradient(left, white 50%, cyan 50%);
background: linear-gradient(left, white 50%, cyan 50%);
background-size: 50px 25%;;
padding: 2px;
display: block;
}

ul {
list-style: none;
position: relative;
text-align: left;
padding: 0; margin: 0;
}

li {float: left;}

ul:after {clear: both;}

ul:before,ul:after {content: " ";display: table;}

nav {
position: relative;
background: #fff;
background-image: -webkit-linear-gradient(bottom, white 7%, #bbbbbb 100%);
background-image: -moz-linear-gradient(bottom, white 7%, #bbbbbb 100%);
background-image: -o-linear-gradient(bottom, white 7%, #bbbbbb 100%);
background-image: linear-gradient(bottom, white 7%, #bbbbbb 100%);
text-align: center;
-webkit-box-shadow: 2px 2px 7px #999;
-moz-box-shadow: 2px 2px 7px #999;
box-shadow: 2px 2px 7px #999;
border-radius: 0 0 8px 8px;
}

ul.menubar li a {
color: #078cb2;
text-decoration:none;
display: block;
padding: 15px 30px;
border-right:1px double #999;
}

ul.menubar li:last-child a {border-right: none;}

ul.menubar li a:hover {color: red;text-shadow:0px 0px 2px #078cb2;}

ul.alt-menu {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 7px #999;
width: 35%;
display:none;
}

ul.alt-menu li {float: none;margin: 0;}

ul.alt-menu li a {
border-bottom: 1px dotted #ccc;
border-right: none;
padding: 10px 30px;
}

ul.alt-menu li:last-child a {border-bottom: none;}

ul.alt-menu li a:hover {background: #eeeeee;}

ul.menubar li:hover ul {display: block;background: #fff;}

ul.menubar li:hover a {background: #fff;color: #666;text-shadow: none;}

ul.menubar li:hover > a{color: #000;}

@media only screen and (max-width: 600px) {.dekor {padding: 3px;}

.nav-wrapper {width: 100%;margin-top: 0px;}

li {float: none;}

ul.menubar li:hover a {
background: none;
color: #8B8B8B;
text-shadow: 1px 1px #000;
}

ul.menubar li:hover ul {
display: block;
background: #272727;
color: #fff;
}

ul.alt-menu {
display: block;
position: static;
box-shadow: none;
width: 100%;
}

ul.alt-menu li a {background: #272727; border: none;color: #8B8B8B;}

ul.alt-menu li a:hover {color: #ccc;background: none;}
}

Evet işlemimiz tamam. Bu gayet şık görünüşlü menü sayesinde ziyaretçilerinize kusursuz bir navigasyon hizmeti sağlayabilirsiniz. Sıradan bir Sidebar’a responsive niteliği katan John Urbank’in tekniğiyle hazırladığımız bu dersin de sonuna geldik.

Bu da ilginizi çekebilir  HTML5 ile Tam Ekran (Full Screen)

Görüşmek üzere.