Daha önceden tasarladığım 2 css menü yü paylaşmak istedim.
1-Sağdaki yeşil şey mouse ile üzerine geldiğimiz butana ilerleyip rengini yeşil yapıyo.
Görüntüsü :
Kodlar :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1254">
<title>anasayfa</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function buton1(poz,ani,konum){
$(".buton4").css({
"animation-name" : ani,
"animation-duration" : "1s",
"-webkit-animation-name" : ani,
"-webkit-animation-duration" : "1s",
"left" : poz})
var a="renk('"+konum+"')"
setTimeout(a,"600")}
function geri1(ani,konum){
$(".buton4").css({
"animation-name" : ani,
"animation-duration" : "1s",
"-webkit-animation-name" : ani,
"-webkit-animation-duration" : "1s",
"left" : "590px"})
var a="eskirenk('"+konum+"')"
setTimeout(a,"100")}
function renk(konum2){
$(konum2).css("background-color","#00ff06")}
function eskirenk(){
$(".buton1").css("background-color","#fff")
$(".buton2").css("background-color","#fff")
$(".buton3").css("background-color","#fff")}
</script>
<style type="text/css">
@keyframes b1{0% {left:590px}100% {left:10px;}}
@-webkit-keyframes b1{0% {left:590px}100% {left:10px;}}
@keyframes b2{0% {left:590px}100% {left:220px;}}
@-webkit-keyframes b2{0% {left:590px}100% {left:120px;}}
@keyframes b3{0% {left:590px}100% {left:230px;}}
@-webkit-keyframes b3{0% {left:590px}100% {left:230px;}}
@keyframes geri1{0% {left:10px;}100% {left:590px;}}
@-webkit-keyframes geri1{0% {left:10px;}100% {left:590px;}}
@keyframes geri2{0% {left:120px;}100% {left:590px;}}
@-webkit-keyframes geri2{0% {left:120px;}100% {left:590px;}}
@keyframes geri3{0% {left:230px;}100% {left:590px;}}
@-webkit-keyframes geri3{0% {left:230px;}100% {left:590px;}}
body{margin:0; padding:0;}
#ana{
width:700px;background-color:#333;margin:auto;position:relative;
height:40px;border-radius:10px;-webkit-border-radius:10px;}
.buton1{
width:100px;color:#000;background-color:#fff;position:absolute;
border-radius:1em;-webkit-border-radius:1em;text-align:center;
font-weight:bold;font-size:18px;left:10px;top:10px; z-index:1;}
.buton2{
width:100px;color:#000;background-color:#fff;position:absolute;
border-radius:1em;-webkit-border-radius:1em;text-align:center;
font-weight:bold;font-size:18px;left:120px;top:10px;z-index:1;}
.buton3{
width:100px;color:#000;background-color:#fff;position:absolute;
border-radius:1em;-webkit-border-radius:1em;text-align:center;
font-weight:bold;font-size:18px;left:230px;top:10px;z-index:1;}
.buton4{
width:100px;color:#000;background-color:#00ff06;position:absolute;
border-radius:1em;-webkit-border-radius:1em;text-align:center;
font-weight:bold;font-size:18px;left:590px;top:10px;}
</style>
</head>
<body>
<div id="ana">
<div class="buton1" onMouseOver="buton1('10px','b1','.buton1')" onMouseout="geri1('geri1')">Anasayfa</div>
<div class="buton2" onMouseOver="buton1('120px','b2','.buton2')" onMouseout="geri1('geri2')">Makaleler</div>
<div class="buton3" onMouseOver="buton1('230px','b3','.buton3')" onMouseout="geri1('geri3')">İletişim</div>
<div class="buton4"> <br/></div>
</div>
</body>
</html>
2- Mouse ile üzerine geldiğimiz buton 2 ye bölünüm buton yazısını gösteriyo.
Görüntüsü :
Kodları :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function buton1(alan1,ani1,width1,alan2,ani2,left2,alan3,ani3,left3,em,ittir,ani4){
$(alan1).css({
"animation-name" : ani1,
"animation-duration" : "1s",
"-webkit-animation-name" : ani1,
"-webkit-animation-duration" : "1s",
"width" : width1})
$(alan2).css({
"animation-name" : ani2,
"animation-duration" : "1s",
"-webkit-animation-name" : ani2,
"-webkit-animation-duration" : "1s",
"left" : left2})
$(alan3).css({
"animation-name" : ani3,
"animation-duration" : "1s",
"-webkit-animation-name" : ani3,
"-webkit-animation-duration" : "1s",
"left" : left3,
"border-radius" : em})
if (alan1==".alan1"){
$(".alan2").css({
"animation-name" : ani4,
"animation-duration" : "1s",
"-webkit-animation-name" : ani4,
"-webkit-animation-duration" : "1s",
"left" : ittir})}
}
</script>
<style type="text/css">
@keyframes ittir{0%{left:120px;}100%{left:220px;}}
@-webkit-keyframes ittir{0%{left:120px;}100%{left:220px;}}
@keyframes ittirgeri{0%{left:220px;}100%{left:120px;}}
@-webkit-keyframes ittirgeri{0%{left:220px;}100%{left:120px;}}
/*11111111111111111111111111*/
@keyframes b1{0%{width:100px;}100%{width:200px;}}
@-webkit-keyframes b1{0%{width:100px;}100%{width:200px;}}
@keyframes b1geri{0%{width:200px;}100%{width:100px;}}
@-webkit-keyframes b1geri{0%{width:200px;}100%{width:100px;}}
@keyframes b1ust{0%{left:50px;}100%{left:150px;}}
@-webkit-keyframes b1ust{0%{left:50px;}100%{left:150px;}}
@keyframes b1ustgeri{0%{left:150px;}100%{left:50px;}}
@-webkit-keyframes b1ustgeri{0%{left:150px;}100%{left:50px;}}
@keyframes b1alt{0%{left:0px;}100%{border-radius:0em;left:50px;}}
@-webkit-keyframes b1alt{0%{left:0px;}100%{border-radius:0em;left:50px;}}
@keyframes b1altgeri{0%{left:50px;}100%{border-radius:1em;left:0px;}}
@-webkit-keyframes b1altgeri{0%{left:50px;}100%{border-radius:1em;left:0px;}}
/*222222222222222222222222222*/
@keyframes b12{0%{width:100px;}100%{width:200px;}}
@-webkit-keyframes b12{0%{width:100px;}100%{width:200px;}}
@keyframes b1geri2{0%{width:200px;}100%{width:100px;}}
@-webkit-keyframes b1geri2{0%{width:200px;}100%{width:100px;}}
@keyframes b1ust2{0%{left:50px;}100%{left:150px;}}
@-webkit-keyframes b1ust2{0%{left:50px;}100%{left:150px;}}
@keyframes b1ustgeri2{0%{left:150px;}100%{left:50px;}}
@-webkit-keyframes b1ustgeri2{0%{left:150px;}100%{left:50px;}}
@keyframes b1alt2{0%{left:0px;}100%{border-radius:0em;left:50px;}}
@-webkit-keyframes b1alt2{0%{left:0px;}100%{border-radius:0em;left:50px;}}
@keyframes b1altgeri2{0%{left:50px;}100%{border-radius:1em;left:0px;}}
@-webkit-keyframes b1altgeri2{0%{left:50px;}100%{border-radius:1em;left:0px;}}
#ana{
width:700px;background-color:#333;margin:auto;position:relative;
height:35px;border-top-left-radius:50px;border-top-right-radius:15px;}
.alan1{width:100px;position:relative;height:25px;top:5px; left:10px;}
.b1alt{width:100px;background-color:#fff;position:absolute;height:25px;
text-align:center; z-index:0;border-radius:1em;color:#333;font-weight:bold;
font-family:Arial;font-size:18px;cursor:pointer;}
.b1ust1{width:50px;background-color:#999;position:absolute;height:25px;
text-align:center; z-index:1;border-top-left-radius:1em;
-webkit-border-top-left-radius:1em;border-bottom-left-radius:1em;
-webkit-border-bottom-left-radius:1em;left:0px;}
.b1ust2{width:50px;background-color:#999;position:absolute;height:25px;
text-align:center; z-index:1;border-top-right-radius:1em;
-webkit-border-top-right-radius:1em;border-bottom-right-radius:1em;
-webkit-border-bottom-right-radius:1em;left:50px;}
.alan2{width:100px;position:relative;height:25px;top:-20px; left:120px;}
.b1alt2{width:100px;background-color:#fff;position:absolute;height:25px;
text-align:center; z-index:0;border-radius:1em;color:#333;font-weight:bold;
font-family:Arial;font-size:18px;cursor:pointer;}
.b1ust12{width:50px;background-color:#999;position:absolute;height:25px;
text-align:center; z-index:1;border-top-left-radius:1em;
-webkit-border-top-left-radius:1em;border-bottom-left-radius:1em;
-webkit-border-bottom-left-radius:1em;left:0px;}
.b1ust22{width:50px;background-color:#999;position:absolute;height:25px;
text-align:center; z-index:1;border-top-right-radius:1em;
-webkit-border-top-right-radius:1em;border-bottom-right-radius:1em;
-webkit-border-bottom-right-radius:1em;left:50px;}
</style>
</head>
<body>
<div id="ana">
<div class="alan1"
onMouseover="buton1('.alan1','b1','200px','.b1ust2','b1ust','150px','.b1alt','b1alt','50px','0em','220px','ittir')"
onMouseout="buton1('.alan1','b1geri','100px','.b1ust2','b1ustgeri','50px','.b1alt','b1altgeri','0px','1em','120px','ittirgeri')">
<div class="b1alt">Anasayfa</div>
<div class="b1ust1"></div>
<div class="b1ust2"></div></div>
<div class="alan2"
onMouseover="buton1('.alan2','b12','200px','.b1ust22','b1ust2','150px','.b1alt2','b1alt2','50px','0em')"
onMouseout="buton1('.alan2','b1geri2','100px','.b1ust22','b1ustgeri2','50px','.b1alt2','b1altgeri2','0px','1em')">
<div class="b1alt2">Makaleler</div>
<div class="b1ust12"></div>
<div class="b1ust22"></div></div>
</div>
</body>
</html>
UstaDerslik
