Kapat

merhaba arkadaşlar.

bu yazımda kendime ait olmayan bir çalışma paylaşacağım. kaynaklarıma baktığımda böyle güzel bir çalışma buldum ve sizlerle paylaşmak istedim.

sade ve güzel bir menü örneği, yeşil efekt kullanılmış bir menü tasarımı olmuş arkadaşlar.

 

ben kodlarını sizlerle paylaşıyorum buyurun:

 

css kod:

 

css kodları

html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

.about {
margin: 70px auto 40px;
padding: 8px;
width: 260px;
font: 10px/18px 'Lucida Grande', Arial, sans-serif;
color: #bbb;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
background: #383838;
background: rgba(34, 34, 34, 0.8);
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}
.about a {
color: #eee;
text-decoration: none;
border-radius: 2px;
-webkit-transition: background 0.1s;
-moz-transition: background 0.1s;
-o-transition: background 0.1s;
transition: background 0.1s;
}
.about a:hover {
text-decoration: none;
background: #555;
background: rgba(255, 255, 255, 0.15);
}

.about-links {
height: 30px;
}
.about-links > a {
float: left;
width: 50%;
line-height: 30px;
font-size: 12px;
}

.about-author {
margin-top: 5px;
}
.about-author > a {
padding: 1px 3px;
margin: 0 -1px;
}
body {
font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
color: #404040;
background: #e6e6e6 url("../img/bg.png") 0 0 repeat;
}

.container {
margin: 100px auto;
width: 720px;
text-align: center;
}

.nav {
height: 48px;
display: inline-block;
}
.nav > li, .nav:active > .active {
float: left;
position: relative;
margin: 0 0 4px;
height: 44px;
color: #595959;
text-shadow: 0 1px white;
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid;
border-color: #cfcfcf #d6d6d6 #c8c8c8;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25));
-webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1);
}
.nav > li:hover {
color: #539f07;
text-shadow: 0 1px white, 0 0 20px white;
}
.nav > li.active,
.nav > .active:active,
.nav > li:active {
z-index: 2;
margin: 4px 0 0;
height: 43px;
color: #404040;
background: transparent;
border-color: #ccc;
border-width: 1px 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4);
}
.nav > li:active {
z-index: 3;
}
.nav > li:first-child {
border-left-width: 1px !important;
border-left-color: #c6c6c6;
border-radius: 5px 0 0 5px;
}
.nav > li:last-child {
border-right-width: 1px !important;
border-right-color: #c6c6c6;
border-radius: 0 5px 5px 0;
}
.nav > li + li, .nav:active > .active + li, .nav:active > li + .active {
border-left-width: 0;
}
.nav > .active + li,
.nav > .active:active + li,
.nav > li:active + li,
.nav > li:active + .active {
border-left-width: 1px;
}
.nav > li > a {
display: block;
position: relative;
line-height: 44px;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
color: inherit;
text-decoration: none;
outline: 0;
}
.nav > li > a:before {
content: attr(title);
position: absolute;
top: 1px;
left: 20px;
color: rgba(255, 255, 255, 0.4);
text-shadow: none;
}
.nav .nav-icon {
padding: 0 15px;
}
.nav .nav-icon:before {
display: none;
}

[class*="icon-"] {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: text-top;
background-image: url("../kod-kaynak/wk-ev-1.png");
background-repeat: no-repeat;
background-color: transparent;
font: 0/0 serif;
text-shadow: none;
color: transparent;
}

.icon-home {
background-position: 0 0;
}
html kodları:

<section class="container">
<nav>
<ul class="nav">
<li><a href="http://www.webkodu.com" class="nav-icon" title="WebKodu.com"><span class="icon-home">WebKodu.com</span></a></li>
<li class="active"><a href="#" title="Site Kodları">Site Kodları</a></li>
<li><a href="#" title="Site Analiz">Site Analiz</a></li>
<li><a href="#" title="Online Araçlar">Online Araçlar</a></li>
<li><a href="#" title="Scripts">Scripts</a></li>
<li><a href="#" title="Freebies">Freebies</a></li>
<li><a href="http://www.webkodu.com" title="Sitene Ekle">Sitene Ekle</a></li>
</ul>
</nav>
</section>

Bir önceki yazımız olan animasyonlu menü yapımı başlıklı makalemizde css animasyonlu menü yapımı, css kod örnekleri ve css menü hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

code


Kapat