سلام به همگی دوستان.من یه منوی دایره ای رو روی سایتم نصب کردم که به صورت عمودی نمایش داده میشه.عکسش رو ضمیمه کردم ببینید.حالا من میخوام افقی بشه کد css رو میزارم اگه از دوستان کسی میدونه بگه چه تغییری تو این کد بدم؟
body{
margin:0;
background:url(../images/bg_2.png); /* call background image */
}
/* ========== THE MAIN FONT ========== */
@font-face{
/* call font */
font-family:"BebasNeue";
src:url('../font/BebasNeue.eot');
src:url('../font/BebasNeue.eot?#iefix') format('embedded-opentype'),
url('../font/BebasNeue.ttf') format('truetype'),
url('../font/BebasNeue.svg#svgFontName') format('svg');
}
/* ========== MAIN DIV THAT HOLDS THE ENTIRE MENU ========== */
.menu{
width:195px; /* width */
margin:60px 0 0 30px; /* separates menu 60px from top and 30px from left side */
float:left; /* go left */
}
.menu ul{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
list-style:none;
}
/* ========== LINKS/CIRCLES ========== */
.menu ul li{
width:135px; /* width */
height:135px; /* height */
margin-bottom:-35px;
position:relative;
text-align:center; /* text goes to the center */
overflow:hidden;
-webkit-border-radius:70px; /* from cubes to circles */
-moz-border-radius:70px; /* from cubes to circles */
border-radius:70px; /* from cubes to circles */
-webkit-box-shadow:0 1px 2px #999;
-moz-box-shadow:0 1px 2px #999;
box-shadow:0 1px 2px #999;
/* background color */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}
.menu ul li:nth-child(even){
float:left; /* one link goes to the left */
}
.menu ul li:nth-child(odd){
float:right; /* next link goes to the right */
}
.menu ul li a{
display:block;
width:100%; /* full width */
height:100%; /* full height */
text-decoration:none;
}
/* ========== MAIN TEXT/DESCRIPTION TEXT ========== */
.menu .headline, .menu .description{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
font-weight:normal;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
/* ========== MAIN TEXT ========== */
.menu .headline{
padding-top:45px; /* separates title 45px from top */
font-family:"BebasNeue"; /* call font */
font-size:22px; /* font size */
color:#333; /* color */
text-transform:uppercase; /* from lowercase to uppercase */
text-shadow:0 0 1px #CCC;
}
/* ========== DESCRIPTION TEXT ========== */
.menu .description{
font-family:'Shadows Into Light Two', cursive; /* call Google Web Font */
font-size:15px; /* font size */
color:#999; /* color */
text-shadow:1px 1px 1px #CCC;
}
/* ========== MAIN TEXT ON MOUSEOVER ========== */
.menu ul li:hover .headline{
font-size:32px; /* font size */
color:#F00; /* color */
-webkit-animation:fromLeft 0.4s ease-in-out;
-moz-animation:fromLeft 0.4s ease-in-out;
-o-animation:fromLeft 0.4s ease-in-out;
animation:fromLeft 0.4s ease-in-out;
}
/* ========== MAIN TEXT ON MOUSE CLICK ========== */
.menu ul li:active .headline{
color:#FFF; /* color */
}
/* ========== DESCRIPTION TEXT ON MOUSEOVER ========== */
.menu ul li:hover .description{
filter:alpha(opacity=0);
opacity:0;
}
@-webkit-keyframes fromLeft{
from{
opacity:0;
-webkit-transform:translateX(-70%);
}
to{
opacity:1;
-webkit-transform:translateX(0%);
}
}
@-moz-keyframes fromLeft{
from{
opacity:0;
-moz-transform:translateX(-70%);
}
to{
opacity:1;
-moz-transform:translateX(0%);
}
}
@-o-keyframes fromLeft{
from{
opacity:0;
-o-transform:translateX(-70%);
}
to{
opacity:1;
-o-transform:translateX(0%);
}
}
@keyframes fromLeft{
from{
opacity:0;
transform:translateX(-70%);
}
to{
opacity:1;
transform:translateX(0%);
}
}
/* LizardTheme/October2012 */
body{
margin:0;
background:url(../images/bg_2.png); /* call background image */
}
/* ========== THE MAIN FONT ========== */
@font-face{
/* call font */
font-family:"BebasNeue";
src:url('../font/BebasNeue.eot');
src:url('../font/BebasNeue.eot?#iefix') format('embedded-opentype'),
url('../font/BebasNeue.ttf') format('truetype'),
url('../font/BebasNeue.svg#svgFontName') format('svg');
}
/* ========== MAIN DIV THAT HOLDS THE ENTIRE MENU ========== */
.menu{
width:195px; /* width */
margin:60px 0 0 30px; /* separates menu 60px from top and 30px from left side */
float:left; /* go left */
}
.menu ul{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
list-style:none;
}
/* ========== LINKS/CIRCLES ========== */
.menu ul li{
width:135px; /* width */
height:135px; /* height */
margin-bottom:-35px;
position:relative;
text-align:center; /* text goes to the center */
overflow:hidden;
-webkit-border-radius:70px; /* from cubes to circles */
-moz-border-radius:70px; /* from cubes to circles */
border-radius:70px; /* from cubes to circles */
-webkit-box-shadow:0 1px 2px #999;
-moz-box-shadow:0 1px 2px #999;
box-shadow:0 1px 2px #999;
/* background color */
background:#FFF;
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#EEE));
background:-webkit-linear-gradient(top, #FFF, #EEE);
background:-moz-linear-gradient(top, #FFF, #EEE);
background:-ms-linear-gradient(top, #FFF, #EEE);
background:-o-linear-gradient(top, #FFF, #EEE);
}
.menu ul li:nth-child(even){
float:left; /* one link goes to the left */
}
.menu ul li:nth-child(odd){
float:right; /* next link goes to the right */
}
.menu ul li a{
display:block;
width:100%; /* full width */
height:100%; /* full height */
text-decoration:none;
}
/* ========== MAIN TEXT/DESCRIPTION TEXT ========== */
.menu .headline, .menu .description{
margin:0; /* removes the space added by default */
padding:0; /* removes the space added by default */
font-weight:normal;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
/* ========== MAIN TEXT ========== */
.menu .headline{
padding-top:45px; /* separates title 45px from top */
font-family:"BebasNeue"; /* call font */
font-size:22px; /* font size */
color:#333; /* color */
text-transform:uppercase; /* from lowercase to uppercase */
text-shadow:0 0 1px #CCC;
}
/* ========== DESCRIPTION TEXT ========== */
.menu .description{
font-family:'Shadows Into Light Two', cursive; /* call Google Web Font */
font-size:15px; /* font size */
color:#999; /* color */
text-shadow:1px 1px 1px #CCC;
}
/* ========== MAIN TEXT ON MOUSEOVER ========== */
.menu ul li:hover .headline{
font-size:32px; /* font size */
color:#F00; /* color */
-webkit-animation:fromLeft 0.4s ease-in-out;
-moz-animation:fromLeft 0.4s ease-in-out;
-o-animation:fromLeft 0.4s ease-in-out;
animation:fromLeft 0.4s ease-in-out;
}
/* ========== MAIN TEXT ON MOUSE CLICK ========== */
.menu ul li:active .headline{
color:#FFF; /* color */
}
/* ========== DESCRIPTION TEXT ON MOUSEOVER ========== */
.menu ul li:hover .description{
filter:alpha(opacity=0);
opacity:0;
}
@-webkit-keyframes fromLeft{
from{
opacity:0;
-webkit-transform:translateX(-70%);
}
to{
opacity:1;
-webkit-transform:translateX(0%);
}
}
@-moz-keyframes fromLeft{
from{
opacity:0;
-moz-transform:translateX(-70%);
}
to{
opacity:1;
-moz-transform:translateX(0%);
}
}
@-o-keyframes fromLeft{
from{
opacity:0;
-o-transform:translateX(-70%);
}
to{
opacity:1;
-o-transform:translateX(0%);
}
}
@keyframes fromLeft{
from{
opacity:0;
transform:translateX(-70%);
}
to{
opacity:1;
transform:translateX(0%);
}
}
/* LizardTheme/October2012 */
کد:
/* Animated Vertical Circles Menu ( Theme 1 ) - Animation 4 */
You must be registered for see images attach