|
Webmaster Genel kategorisinde açılmış olan Kırmızı Css yan menü konusu , ...
| LinkBack | Seçenekler | Arama | Stil |
03.02.2016, 23:15 | #1 (permalink) |
Kullanıcıların profil bilgileri misafirlere kapatılmıştır. | Kırmızı Css yan menü Önizleme [Link'i Görebilmeniz İçin Kayıt Olunuz.! Kayıt OL] Menü CSS Kod: #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { width: 180px; z-index: 10; } #cssmenu ul { border: 1px solid #cccccc; border-radius: 5px; background: #ffffff; background: -moz-linear-gradient(bottom, #f0f0f0, #ffffff); background: -webkit-linear-gradient(bottom, #f0f0f0, #ffffff); background: -o-linear-gradient(bottom, #f0f0f0, #ffffff); background: -ms-linear-gradient(bottom, #f0f0f0, #ffffff); background: linear-gradient(to top, #f0f0f0, #ffffff); } #cssmenu ul li { display: block; border-bottom: 1px solid #cccccc; } #cssmenu ul li.active { border-bottom: 0; } #cssmenu ul li:last-child { border-bottom: 0; } #cssmenu ul li a { display: block; padding: 14px 12px; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; text-decoration: none; color: #444444; } #cssmenu ul li.active { left: -8px; width: 194px; padding: 2px; background: #ce4c4a; background: -moz-linear-gradient(bottom, #c43735, #d56462); background: -webkit-linear-gradient(bottom, #c43735, #d56462); background: -o-linear-gradient(bottom, #c43735, #d56462); background: -ms-linear-gradient(bottom, #c43735, #d56462); background: linear-gradient(to top, #c43735, #d56462); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); } #cssmenu ul li.active > a { padding: 12px 12px 12px 16px; border-left: 1px dashed #de8886; border-top: 1px dashed #de8886; border-bottom: 1px dashed #de8886; color: #ffffff; text-shadow: 0 1px 1px #8c2726; } #cssmenu ul li.active:after { position: absolute; right: -16px; top: 7px; width: 31.526911934581186px; height: 31.526911934581186px; background: #ce4c4a; background: -moz-linear-gradient(-45deg, #c43735, #d56462); background: -webkit-linear-gradient(-45deg, #c43735, #d56462); background: -o-linear-gradient(-45deg, #c43735, #d56462); background: -ms-linear-gradient(-45deg, #c43735, #d56462); background: linear-gradient(-45deg, #c43735, #d56462); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); content: ""; } #cssmenu ul li.active:before { position: absolute; right: -12px; top: 9px; z-index: 10; width: 28.526911934581186px; height: 28.526911934581186px; border-right: 1px dashed #e9afae; border-top: 1px dashed #e9afae; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); content: ""; } #cssmenu ul li.active a:after { position: absolute; bottom: -7px; left: -11px; z-index: -1; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid transparent; border-right: 8px solid #982b29; content: ""; } Kod: <div id='cssmenu'> <ul> <li class='active'><a href='index.html'>Anasayfa</a></li> <li><a href='#'>Hakkımda</a></li> <li><a href='#'>İletişim</a></li> <li><a href='#'>Diğer</a></li> </ul> </div>
__________________ |
Yukarı'daki Konuyu Aşağıdaki Sosyal Ağlarda Paylaşabilirsiniz. |
| |
Forum hakkında | Kullanılan sistem hakkında |
| SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc. |