Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / Sa d ece CSS i l e Ya ta y M en ü
Sadece CSS ile Yatay Menü Vatanay Özbeyli tarafından 08 Haziran 2013 tarihinde yazıldı. ~ 1 Yorum + Değiştir
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.
Nasıl Yapılır İlk olarak <head></head> tagları arasına aşağıdaki kod satırını eklemekle başlıyoruz. 1 <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. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<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>
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<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. 1 2 3 4
body { line-height:1.4em; letter-spacing: -0.5px; font:12px "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 5 text-transform: uppercase; 6 text-align: center; 7 } 8 9 .nav-wrapper { 10 display: inline-block; 11 margin-top: 40px; 12 } 13 14 /* Sidebar'ın üst kısmını renklendiriyoruz. */ 15 .dekor { 16 background: -webkit-linear-gradient(left, #4b8ac0 50%, cyan 50%); 17 background: -moz-linear-gradient(left, white 50%, cyan 50%); 18 background: -o-linear-gradient(left, white 50%, cyan 50%); 19 background: linear-gradient(left, white 50%, cyan 50%); 20 background-size: 50px 25%;; 21 padding: 2px;
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
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;}
82 ul.alt-menu li a:hover {background: #eeeeee;} 83 84 ul.menubar li:hover ul {display: block;background: #fff;} 85 86 ul.menubar li:hover a {background: #fff;color: #666;text-shadow: none;} 87 88 ul.menubar li:hover > a{color: #000;} 89 90 @media only screen and (max-width: 600px) {.dekor {padding: 3px;} 91 92 .nav-wrapper {width: 100%;margin-top: 0px;} 93 94 li {float: none;} 95 96 ul.menubar li:hover a { 97 background: none; 98 color: #8B8B8B; 99 text-shadow: 1px 1px #000; 100 } 101 102 ul.menubar li:hover ul { 103 display: block; 104 background: #272727; 105 color: #fff; 106 } 107 108 ul.alt-menu { 109 display: block; 110 position: static; 111 box-shadow: none; 112 width: 100%; 113 } 114 115 ul.alt-menu li a {background: #272727; border: none;color: #8B8B8B;} 116 117 ul.alt-menu li a:hover {color: #ccc;background: none;} 118 } 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. Görüşmek üzere.
Benzer Konular: Sadece CSS Kullanarak Dropdown Menu Nasıl Hazırlanır HTML5 ve CSS3 ile Yaprak Menü
CSS Kullanarak Button Tasarlamak CSS ile Toogle Menü CSS3 ile Sosyal Ağ Kutucuğu
Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : android , cihaz , css , iphone , menu , menubar , mobil , responsive , sadece , sidebar , yapımı , yatay