.verimenu {
height: 36px;
width: 980px;
margin-bottom: 5px;
}
.verimenu .menu {
font-family: 'proximanovabold', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
border-style: solid;
border-color: #dddddd;
text-shadow: 1px 1px 0 #FFF;
border-width: 1px 0;
height: 36px;
background-color: #f8f8f8;
background-image: -moz-linear-gradient(top, #fafafa, #f6f6f6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#f6f6f6));
background-image: -webkit-linear-gradient(top, #fafafa, #f6f6f6);
background-image: -o-linear-gradient(top, #fafafa, #f6f6f6);
background-image: linear-gradient(to bottom, #fafafa, #f6f6f6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#fff6f6f6', GradientType=0);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,.05);
*zoom: 1;
/*
> div
{
float:left;
line-height:18px;
padding:10px 15px 8px 15px;
cursor:pointer;
border-right:1px solid @defauLtBorderColor;
.box-shadow(~"inset 1px 0 0 #FFF, inset -1px 0 1px #FFF");
position:relative;
> span
{
position:absolute;
width:12px;
height:6px;
bottom:-6px;
left:50%;
margin-left:-6px;
.siteSprite(0,-94px);
display:none;
}
&:hover
{
background:#FFF;
color:#000;
}
&.oth
{
padding-left:16px;
padding-right:16px;
}
&.min
{
font-family:@sansFontFamily;
font-size:11px;
color:@defauLtLight;
position:relative;
padding-top:9px;
padding-bottom:9px;
&:hover
{
background:none;
}
.drop
{
position:absolute;
right:-8px;
top:41px;
background:#FFF;
border:1px solid @defauLtBorderColor;
.border-radius(@baseBorderRadius);
.box-shadow(0px 3px 10px rgba(0,0,0,.2));
width:301px;
padding:14px 16px;
display:none;
z-index:3;
ul
{
margin:0;
padding:0;
li
{
float:left;
list-style:none;
width:100px;
}
}
a
{
color:@defauLt;
display:inline-block;
font-size:12px;
padding:4px 7px;
text-shadow:none;
background:#FFF;
.transition(background .08s);
&:hover
{
text-decoration:none;
background:@eshred;
color:#FFF;
}
}
span
{
display:block;
position:absolute;
.size(25px,13px);
top:-12px;
right:26px;
.siteSprite(0px,-16px)
}
}
> i
{
position:absolute;
display:inline-block;
.square(16px);
.siteSprite();
.fl();
}
&.top
{
padding-left:35px;
padding-right:22px;
> i
{
top:9px;
left:13px;
background-position:-66px 6px;
}
.logo
{
position:absolute;
top:-38px;
left:-15px;
.transition(top .1s)
}
&.active
{
background:none;
color:@defauLt;
text-shadow:1px 1px 0 #FFF;
}
}
&.all
{
padding-right:16px;
padding-left:14px;
position:relative;
border-right:none;
.box-shadow(inset 1px 0 0 #FFF);
> i
{
top:10px;
right:0;
background-position:-85px 6px;
}
}
}
&.active
{
#gradient .vertical(#c41414,#ec1212);
color:#FFF;
.box-shadow(none);
padding:11px 15px 9px 15px;
margin-top:-1px;
text-shadow:0 1px 3px rgba(0,0,0,.3);
> span
{
display:block;
}
}
}*/
}
.verimenu .menu:before,
.verimenu .menu:after {
display: table;
content: "";
line-height: 0;
}
.verimenu .menu:after {
clear: both;
}
.verimenu .menu.fixed {
position: fixed;
z-index: 1000;
top: -1px;
width: 100%;
left: 0;
-webkit-box-shadow: 0 1px 13px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 13px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 13px rgba(0, 0, 0, 0.2);
}
.verimenu .menu.fixed .logo {
top: -91px !important;
}
.verimenu .menu > ul {
margin: 0 auto;
padding: 0;
width: 980px;
}
.verimenu .menu > ul > li {
list-style: none;
line-height: 18px;
float: left;
border-right: 1px solid #dddddd;
-webkit-box-shadow: inset 1px 0 0 #FFF, inset -1px 0 1px #FFF;
-moz-box-shadow: inset 1px 0 0 #FFF, inset -1px 0 1px #FFF;
box-shadow: inset 1px 0 0 #FFF, inset -1px 0 1px #FFF;
position: relative;
}
.verimenu .menu > ul > li > span {
position: absolute;
width: 12px;
height: 6px;
bottom: -6px;
left: 50%;
margin-left: -6px;
background-image: url("sprite.png");
background-repeat: no-repeat;
background-position: 0 -94px;
display: none;
}
.verimenu .menu > ul > li > a {
color: #484141;
display: block;
padding: 10px 15px 8px 15px;
cursor: pointer;
}
.verimenu .menu > ul > li > a:hover {
background: #FFF;
color: #000;
text-decoration: none;
}
.verimenu .menu > ul > li.min {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11px;
}
.verimenu .menu > ul > li.min > a {
color: #6f6767;
padding-top: 9px;
padding-bottom: 9px;
}
.verimenu .menu > ul > li.min > a:hover {
background: none;
}
.verimenu .menu > ul > li.min .drop {
position: absolute;
right: -8px;
top: 41px;
background: #FFF;
border: 1px solid #dddddd;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
width: 301px;
padding: 14px 16px;
display: none;
z-index: 3;
}
.verimenu .menu > ul > li.min .drop ul {
margin: 0;
padding: 0;
}
.verimenu .menu > ul > li.min .drop ul li {
float: left;
list-style: none;
width: 100px;
}
.verimenu .menu > ul > li.min .drop a {
color: #484141;
display: inline-block;
font-size: 12px;
padding: 4px 7px;
text-shadow: none;
background: #FFF;
-webkit-transition: background 0.08s;
-moz-transition: background 0.08s;
-o-transition: background 0.08s;
transition: background 0.08s;
}
.verimenu .menu > ul > li.min .drop a:hover {
text-decoration: none;
background: #e00000;
color: #FFF;
}
.verimenu .menu > ul > li.min .drop span {
display: block;
position: absolute;
width: 25px;
height: 13px;
top: -12px;
right: 26px;
background-image: url("sprite.png");
background-repeat: no-repeat;
background-position: 0px -16px;
}
.verimenu .menu > ul > li.min > i {
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
background-image: url("sprite.png");
background-repeat: no-repeat;
background-position: 0 0;
float: left;
}
.verimenu .menu > ul > li.min.top {
-webkit-box-shadow: inset 0px 0 0 #FFF, inset -1px 0 1px #FFF;
-moz-box-shadow: inset 0px 0 0 #FFF, inset -1px 0 1px #FFF;
box-shadow: inset 0px 0 0 #FFF, inset -1px 0 1px #FFF;
}
.verimenu .menu > ul > li.min.top a {
padding-left: 35px;
padding-right: 22px;
}
.verimenu .menu > ul > li.min.top > i {
top: 9px;
left: 13px;
background-position: -66px 6px;
}
.verimenu .menu > ul > li.min.top .logo {
z-index: 99999999;
position: absolute;
top: -38px;
left: -15px;
-webkit-transition: top 0.1s;
-moz-transition: top 0.1s;
-o-transition: top 0.1s;
transition: top 0.1s;
}
.verimenu .menu > ul > li.min.top .logo a {
display: inline;
padding: 0;
}
.verimenu .menu > ul > li.min.top .logo img {
max-width: none;
}
.verimenu .menu > ul > li.min.top.active a {
background: none;
color: #484141;
text-shadow: 1px 1px 0 #FFF;
}
.verimenu .menu > ul > li.min.all {
position: relative;
border-right: none;
padding: 9px 16px 9px 14px;
-webkit-box-shadow: inset 1px 0 0 #ffffff;
-moz-box-shadow: inset 1px 0 0 #ffffff;
box-shadow: inset 1px 0 0 #ffffff;
cursor: pointer;
}
.verimenu .menu > ul > li.min.all > i {
top: 10px;
right: 0;
background-position: -85px 6px;
}
.verimenu .menu > ul > li.active {
color: #FFF;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-top: -1px;
}
.verimenu .menu > ul > li.active a {
background-color: #d41313;
background-image: -moz-linear-gradient(top, #c41414, #ec1212);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c41414), to(#ec1212));
background-image: -webkit-linear-gradient(top, #c41414, #ec1212);
background-image: -o-linear-gradient(top, #c41414, #ec1212);
background-image: linear-gradient(to bottom, #c41414, #ec1212);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc41414', endColorstr='#ffec1212', GradientType=0);
color: #FFF;
padding: 11px 15px 9px 15px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.verimenu .menu > ul > li.active > span {
display: block;
} Menüye Açılır Menü Ekleyemedim
2
●672
- 16-08-2014, 11:52:29Arkadaşlar İnternet Üzerinden Bir Menü Buldrum Css Kodları Aşağıdaki şekildedir ama açılır menü sanırım jquery dosyası eklerek olabiliyor ama şimdi menüyü bulduğum yeri bulamıyorum sizden ricam css şeklinde nasıl ekleyebilirim yardımcı olabilirmisiniz? Css kodlarım aşağıdadır ..
- 23-08-2014, 12:24:34Css üzerinden renklendirdiğin menüyü js yada js üzerine bir eklenti olan jquery ile yaparsın.
http://jquery.com/
1-2 ay üzerine çalış eminim istediğini yaparsın. kolay gelsin.
