Web sitem için css ile mobil görünüm hazırlamak istiyorum. internette bununla ilgili bir çok kaynak buldum. Ama bazı yerlarini anlamadım. Hazırladığımız css yi sitenin var olan css'nin çine mi ekleyeceğiz yoksa yeni bir css dosyası mı oluşturacağız. Bu konuda bilgi istiyorum. Bir de
/* #Mobil versiyonu
================================================== */
@media only screen and (max-width: 767px) {
//Var olan css kodlarımı nasıl editleyip bu alana ekleyebilirim
}
baştan css yazmaktansa var olanı editleyip buraya eklemem daha mantıklı geliyor. Nasıl yapabilirim. Bilgisi olan var mı? css kodlarım aşağıda.
style.css
body{background:#F8F7F7 url(images/bg.jpg);font-family:'Tahoma', arial, sans-serif;overflow:auto;font-size:14px;padding:0px;margin:0px;background-attachment:fixed;}
html{cursor:url(images/cursor.png), auto;}
a{color:#3A4450;text-decoration:none}
a{cursor:url(images/cursorhand.png), auto;}
.socialmenuhome{cursor:url(images/cursorhand.png), auto;}
img{border:none}
h1{font-size:14px;}
iframe{border:none;padding:0px;margin:0px;}
h2{font-size:12px;margin:0px;padding:0px;font-weight:normal;position:relative;}
h2.blocktitlered{background:#CE5343;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px}
h2.blocktitleblue{background:#1273AA;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px}
h2.blocktitleturquoise{background:#14A7C6;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px}
h2.blocktitlefuschia{background:#751765;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px}
h2.blocktitleyellow{background:#C7BC6C;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px}
h2.blocktitlegreen{background:#9BB24A;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px}
h2.blocktitleredbig{background:#CE5343;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px 0px 5px 0px}
h2.blocktitlebluebig{background:#1273AA;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px 0px 5px 0px}
h2.blocktitleyellowbig{background:#C7BC6C;padding:10px;color:#fff;display:block;font-size:14px;position:relative;padding-left:54px;margin:0px 0px 5px 0px}
.circle{background:#fff;width:38px;height:38px;position:absolute;left:10px;top:0px;webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;display:block;}
.circlered{background:#fff url(images/star.png) no-repeat 3px 3px;width:38px;height:38px;position:absolute;left:10px;top:0px;webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;display:block;}
.circleblue{background:#fff url(images/new.png) no-repeat 3px 3px;;width:38px;height:38px;position:absolute;left:10px;top:0px;webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;display:block;}
.circlefuschia{background:#fff url(images/login.png) no-repeat 3px 3px;width:38px;height:38px;position:absolute;left:10px;top:0px;webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;display:block;}
.catimage{margin:7px;width:24px;height:24px;}
img{border:none}
.clearfix{clear:both;display:block;margin:0px;padding:0px;font-size:1px;}
.wrapper{width:960px;margin:0px auto;position:relative;z-index:1;margin-top:10px;}
.headerbg{background:url(images/headerbg.png) repeat-x;border-bottom:1px solid #313131;height:138px;padding:0px;z-index:1;position:relative;}
.headerwrapper{width:960px;margin:0px auto;position:relative;height:138px;}
.topblackwrapper{position:relative;height:38px;margin:0px;}
.header{position:relative;height:100px;margin:0px;}
.container{margin-top:10px;margin-bottom:4px;min-height:400px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#fff;padding:10px;border:1px solid #ccc;}
.catarea{margin-top:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#fff;padding:10px;border:1px solid #ccc;}
.bgblue{background:#A8CDDE;}
.bglightblue{background:#EBF5FD}
.item{position:relative;background:url(images/itembg.png) no-repeat;width:108px;text-align:center;height:122px;float:left;margin:0px 8px 5px 9px;}
.itembg{border:none;width:94px;height:94px;top:6px;left:6px;z-index:1;background:url(images/itembg2.png);position:absolute;}
.item img{border:none;width:94px;height:94px;margin:6px}
.item:hover{color:#CC3333}
.item2{position:relative;background:url(images/itembg.png) no-repeat;width:108px;text-align:center;height:122px;float:left;margin:0px 2px 5px 4px;}
.item2 img{border:none;width:94px;height:94px;margin:6px}
.item2:hover{color:#CC3333}
.sidebar{width:224px;float:right;margin:5px 1px 5px 1px;}
.sidebarblock{margin-bottom:10px;}
.block{width:232px;float:left;margin:5px 1px 5px 1px;}
.blockcontent{padding:10px 0px;border-left:solid 1px #ddd;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;}
.windowarea{width:704px;float:left;margin:0px;padding:0px;}
.item_mini{text-align:center;width:122px;height:124px;float:left;margin:4px;background:#fff;}
.item_mini img{border:1px solid #ccc;width:100%;height:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.item_mini2{text-align:center;width:122px;height:80px;float:left;margin:4px;background:#fff;}
.item_mini2 img{border:1px solid #ccc;width:100%;height:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.adv300x250{width:300px;height:250px;float:left;margin:0px 5px 5px 5px;display:block;border:1px solid #ccc;}
.editorgames{width:626px;float:left;}
.newgames{}
.newgames .item{margin:4px 4px 4px 5px;}
.categorygames{}
.categorygames .item{margin:4px 4px 4px 5px;}
ul.minilist{margin:3px;padding:0px;}
ul.minilist li{overflow:hidden;line-height:16px;padding-left:20px;display:block;padding:3px 3px 3px 24px;margin:2px 0px 0px 10px;background:url(images/listimage.png) no-repeat;border-bottom:1px dotted #ddd;}
ul.minilist li a:link, ul.minilist li a:visited{text-decoration:none;font-size:11px !important;}
ul.minilist li a:hover{color:#CC3333}
.istanbul{position:fixed;top:59px;left:0;width:100%;height:96px;background:url("images/istanbul.png") repeat-x;}
.istanbul-back{position:fixed;top:145px;left:0;width:100%;height:96px;background:url("images/golge.png") 0 -30px repeat-x;z-index:-1;}
.socialmenuwrapper{font-size:16px;width:200px;height:350px;position:absolute;left:-50px;top:280px;display:block;z-index:-1}
.socialmenuwrapper a:link, .socialmenuwrapper a:visited{text-decoration:none;}
.socialmenuhome{background:#444 url(images/socialhome.png) no-repeat 9px 9px;height:50px;display:block;padding-left:52px;line-height:48px;color:#fff;}
.socialwrapper{width:150px;float:right;padding:0px;background:#fff;}
.socialfacebook{padding-left:52px;line-height:48px;color:#555;height:48px;margin:1px 0px;background:#fff url(images/socialfacebook.png) no-repeat no-repeat left center;display:block;}
.socialfacebook:hover{color:#fff;}
.socialtwitter{padding-left:52px;line-height:48px;color:#555;height:48px;margin:1px 0px;background:#fff url(images/socialtwitter.png) no-repeat no-repeat left center;display:block;}
.socialtwitter:hover{color:#fff;}
.socialgoogle{padding-left:52px;line-height:48px;color:#555;height:48px;margin:1px 0px;background:#fff url(images/socialgoogle.png) no-repeat no-repeat left center;display:block;}
.socialgoogle:hover{color:#fff;}
.socialdigg{padding-left:52px;line-height:48px;color:#555;height:48px;margin:1px 0px;background:#fff url(images/socialdigg.png) no-repeat no-repeat left center;display:block;}
.socialdigg:hover{color:#fff;}
.qtitem{overflow:hidden;position:relative;display:block;width:100%;height:100%;}
.qt_title{display:block;text-align:center;font-size:14px;padding:5px 0px;margin:-10px -10px 5px -10px;color:#fff;background:#4f85bb;background:-moz-linear-gradient(top, #4f85bb 0%, #2f68a3 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f85bb), color-stop(100%,#2f68a3));background:-webkit-linear-gradient(top, #4f85bb 0%,#2f68a3 100%);background:-o-linear-gradient(top, #4f85bb 0%,#2f68a3 100%);background:-ms-linear-gradient(top, #4f85bb 0%,#2f68a3 100%);background:linear-gradient(to bottom, #4f85bb 0%,#2f68a3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f85bb', endColorstr='#2f68a3',GradientType=0);}
.qt_image{width:48px;height:48px;float:left;border:1px solid #ccc;padding:2px;margin-right:10px;}
.qt_info{font-size:11px;}
.newmembers{width:220px;}
.memberblock{display:block;margin:3px;font-size:12px;text-decoration:none;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;overflow:hidden;border:1px solid #ccc;padding:2px;}
.numbers{width:16px;height:16px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;text-align:center;float:left;margin:2px;border:2px solid #ccc;}
.memberblock a:link, .memberblock a:visited{text-decoration:none;}
.membername{width:auto;height:16px;line-height:16px;text-align:left;float:left;margin:2px;}
.memberpoints{width:auto;height:16px;line-height:16px;text-align:right;float:right;margin:2px;}
.members .thumb{background:#000;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.members img{outline:none;border:none;width:32px;height:32px;float:left;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1;-o-transition:.3s;-ms-transition:.3s;-moz-transition:.3s;-webkit-transition:.3s;transition:.3s;}
.members:hover img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5;width:32px;height:32px;float:left;}
.gameinfo_right{width:380px;float:right;}
.gameinfo_left{width:550px;float:left;}
.playnow{display:block;background:#444444;color:#fff;padding:6px;font-weight:bold;}
.similiarheader{display:block;background:#444444;color:#fff;padding:6px;font-weight:bold;margin-bottom:10px;}
.commentheader{display:block;background:#1273AA;color:#fff;padding:6px;font-weight:bold;margin-bottom:10px;}
.speedbar{display:block;background:#444444;color:#fff;padding:6px;font-weight:bold;margin-bottom:10px;}
.speedbar a:link,.speedbar a:visited{color:#fff;text-decoration:none}
.speedbar a:hover{color:#fff;text-decoration:underline}
.p10{padding:10px;}
.mb10{margin-bottom:10px;}
.similiararea{padding:10px;}
.footeryazi{display:block;position:relative;z-index:1;}
input, textarea{padding:8px;border:solid 1px #E5E5E5;font:normal 12px Verdana, Tahoma, sans-serif;width:200px;background:-webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));background:-moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);}
textarea{width:98%;height:150px;line-height:150%;background:-webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));background:-moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);}
.form label{margin-left:10px;color:#999999;}
.submit input{width:auto;padding:9px 15px;background:#6A9B9F;font-size:14px;color:#FFFFFF;cursor:pointer;}
.commentbutton{background:#F76570;webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;border:none;color:#fff;font-weight:bold;}
.commentbutton:hover{background:#D04829;webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;border:none;color:#fff;font-weight:bold;cursor:hand;}
.commentarea{color:#313131;max-height:50px;overflow:hidden;border-bottom:1px solid #ddd;display:block;padding:5px;margin-bottom:4px;}
.commentpicture img{border:1px solid #ddd;float:left;width:40px;height:40px;margin-right:10px;padding:2px;}
.commentdetail{background:#F3F3F3;border:1px solid #ddd;padding:2px 6px;color:#313131;display:block;width:300px;}
.commentdetail a:link, .commentdetail a:visited{color:#F76570}
.commentdetail img{float:left;margin:2px 3px 0px 0px;}
.commentdetailright{float:left;width:auto;min-width:400px;}
#commentlist{max-height:420px;overflow:auto;}
.nocomment{font-weight:bold;margin:0px 13px;background:#F3F3F3;border:1px solid #ddd;padding:6px;display:block;}
.logo{width:auto;float:left;margin:0px;}
.gameinfo{width:780px;float:left;}
.gamebuttonsheader{display:block;background:#751765;color:#fff;padding:6px;font-weight:bold;margin-bottom:10px;}
.gamebuttons{height:492px;padding:3px;background:#EEEEEE;border:1px solid #ddd;width:144px;float:right;display:block;}
.gamedesc{padding:10px;background:#EEEEEE;border:1px solid #ddd;display:block;}
.gamedesc a:link,.gamedesc a:visited{text-decoration:none;color:#A93A57}
.gamedesc a:hover{text-decoration:underline;}
.gamebutton{text-align:right;margin-bottom:3px;padding-right:10px;}
.gamebutton a{padding:15px 1px;display:block;color:#fff;font-size:13px}
.like{background:url(images/check.png) 10px center no-repeat;background-color:#5eb748}
.like:hover{background-color:#81be34}
.dislike{background:url(images/vd.png) 10px center no-repeat;background-color:#CE5343}
.dislike:hover{background-color:#EE5343}
.favorite{background:url(images/favorite.png) 10px center no-repeat;background-color:#E76570}
.favorite:hover{background-color:#F76570}
.refresh{background:url(images/refresh.png) 10px center no-repeat;background-color:#353A41}
.refresh:hover{background-color:#553A41}
.report{background:url(images/report.png) 10px center no-repeat;background-color:#893A57}
.report:hover{background-color:#A93A57}
.played{background:url(images/king.png) 10px center no-repeat;background-color:#1273AA;padding:15px 10px 15px 1px;display:block;color:#fff;font-size:13px}
.played:hover{background-color:#159BC4}
.cats{margin:0px;padding:0px;list-style:none;}
.cats li{float:left;width:180px;overflow:hidden;height:20px;margin:3px;border-bottom:1px dotted #ccc;}
.cats li a:link, .cats li a:visited{text-decoration:none;}
.cats li a:hover{text-decoration:underline;}
.cats img{border:none;width:14px;height:14px;margin-right:4px;}
.pager{text-align:center;background:#ccc;padding:5px;margin:10px 0px;padding:10px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
.pager ul{margin:0px auto;list-style:none;padding:0px;text-align:center;}
.pager ul li{margin:2px;float:left;padding:0px;}
.pager ul li a:link, .pager ul li a:visited{padding:5px;background:#414141;text-decoration:none;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;color:#fff;}
.pager ul li a:hover{background:#FF9010;}
.pager ul li a.active{background:#A2C64A;}
.about_category{text-align:center;background:#ADBFAF;padding:5px;margin:10px 0px;padding:10px;}
#search{position:relative;margin:1px;float:right;}
#search input[type=text]{color:#333;border:1px solid #c7c5c5;padding-right:1%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:relative;z-index:1;margin:0px 0px 5px 0px}
#search input[type=text]:focus{border:1px solid #0b8bbb}
#search .search-button{border:0;cursor:pointer;display:block;padding:0;text-decoration:none;text-shadow:none;width:20px;height:20px;position:absolute;right:5px;top:7px;z-index:2;background:url("images/search-ico.png") no-repeat left top}html[dir="rtl"]
#search .search-button{left:5px;right:auto}
a.headeritem{color:#414141;float:right;margin:4px 10px;width:74px;text-align:center;padding:6px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
a.headeritem:hover{background:#cecece;}
a.headeritem img{width:40px;height:40px;border:none;margin-bottom:2px;}
.footerwrapper{{background:#313131;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;}
padding:10px;color:#fff;position:relative;z-index:1;}
.footer{width:960px;margin:0px auto;}
.footer a:link,.footer a:visited{color:#C7BD75;}
.footer a:hover{text-decoration:underline}
.footerblock{float:left;width:310px;margin:5px;}
.footerblockheader{font-size:16px;color:#1273AA;display:block;height:20px;line-height:20px;padding-left:26px;margin-bottom:10px;}
.footerblock ul{margin:0px;padding:0px;list-style:none;padding-left:5px;}
.footerblock ul li{padding:5px;display:block;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#232323;margin:1px;}
.lastplayed{background:url(images/lastplayed48.png) left center no-repeat;}
.websites{background:url(images/websites48.png) left center no-repeat;}
.social{background:url(images/social48.png) left center no-repeat;}
.line{border-top:1px solid #666;padding:10px;height:1px;display:block;}
.minilink a:link,.minilink a:visited{font-weight:normal;text-decoration:none;font-size:12px;}
.minilink a:hover{text-decoration:underline;}
.html{background:url("images/html.png") no-repeat;padding-left:20px;width:100px;margin:0px 20px;}
.css{background:url("images/css.png") no-repeat;padding-left:20px;width:100px;margin:0px 20px;}
.rss{background:url("images/rss.png") no-repeat;padding-left:20px;width:100px;margin:0px 20px;}
.contact{background:url("images/contact.png") no-repeat;padding-left:20px;width:100px;margin:0px 20px;}
.privacy{background:url("images/privacy.png") no-repeat;padding-left:20px;width:100px;margin:0px 20px;}
.sitemap{background:url("images/sitemap.png") no-repeat;padding-left:20px;width:100px;margin:0px 20px;}
.login{float:left;padding:0px;}
.login a{float:left;width:auto;padding:7px 7px;background:#540606;margin:4px;color:#fff;font:11px Arial;font-weight:700;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px;box-shadow:1px 1px 1px #ddd inset;-moz-box-shadow:1px 1px 1px #ddd inset;-webkit-box-shadow:1px 1px 1px #ddd inset}
.login a:hover{color:yellow}
.login .lbtn{float:left;background:#12a7a1 url(images/lgn.png) 5px center no-repeat;padding-left:25px;color:#fff}
.login .rgst{float:left;background:#bd0447 url(images/rgst.png) 5px center no-repeat;padding-left:25px;color:#fff}
.login .rgst:hover{background:#ff8300 url(images/rgsthvr.png) 5px center no-repeat}
.login .lgn{float:left;background:#AE4DAF url(images/rgst.png) 5px center no-repeat;padding-left:25px;color:#fff}
.login .lgn:hover{background:#ff8300 url(images/rgsthvr.png) 5px center no-repeat}
.login .fcbk{float:left;background:#3b5998 url(images/fcbk.png) 5px center no-repeat;padding-left:25px;color:#fff}
.login .admn{float:left;background:#bd0447 url(images/admn.png) 5px center no-repeat;padding-left:25px;color:#fff}
.login .admn:hover{background:#ff8300 url(images/admn.png) 5px center no-repeat}
.login .dashboard{float:left;background:#1273AA url(images/dashboard.png) 5px center no-repeat;padding-left:25px;color:#fff}
.login .dashboard:hover{background:#ff8300 url(images/dashboard.png) 5px center no-repeat}
.login .main{float:left;background:#1273AA url(images/main.png) 5px center no-repeat;padding-left:25px;color:#fff}
.login .main:hover{background:#ff8300 url(images/main.png) 5px center no-repeat}
.login .exit{float:left;background:#F7410F url(images/exit.png) 5px center no-repeat;padding-left:25px;color:#fff}
.login .exit:hover{background:#ff8300 url(images/exit.png) 5px center no-repeat}
.categories{font:12px Arial, Helvetica, sans-serif;color:#18181A;list-style:none;list-style-type:none;list-style-position:inside;margin:0px;padding:0px;margin-bottom:10px;}
.categories li{display:block;padding-bottom:5px;margin:0px;}
.categories li a{display:block;color:#18181A;height:21px;background:#FAFAFA;padding:7px 0 0 10px;text-decoration:none;text-shadow:1px 1px 0px #fff;border:1px solid #E4E4E4;}
.categories li a:hover, .categories li a.active{color:#fff;text-decoration:none;text-shadow:1px 1px 0px #429ADB;background:#64B9FF;}
.categories li .icon-cat{vertical-align:middle;width:20px;height:18px;margin-top:-1px;margin-left:-1px;margin-right:6px;display:inline-block;border:0;}
.newstamp{position:absolute;top:6px;right:7px;padding:3px 5px;color:#FFF;border:1px solid #3E3E3B;background:#7d7e7d;z-index:1;}
style5.css
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.bt-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
border-width: 0px;
border-style: solid;
border-color: #333;
background-color: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
z-index:1000;
}
.bt-menu.bt-menu-open {
height: 100%;
border-width: 0px 0px 50px 150px;
background-color: rgba(0,0,0,0.3);
-webkit-transition: border-width 0.3s, background-color 0.3s;
transition: border-width 0.3s, background-color 0.3s;
}
.bt-overlay {
position: absolute;
width: 100%;
}
.bt-menu-open .bt-overlay {
height: 100%;
}
.bt-menu-trigger {
position: fixed;
top: 10px;
left: 20px;
z-index: 100;
display: block;
width: 50px;
height: 50px;
cursor: pointer;
}
.bt-menu-trigger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 8%;
background-color: #fff;
font-size: 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.bt-menu-trigger span:before {
-webkit-transform: translateY(-250%);
transform: translateY(-250%);
}
.bt-menu-trigger span:after {
-webkit-transform: translateY(250%);
transform: translateY(250%);
}
.bt-menu-open .bt-menu-trigger span:before {
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
.bt-menu-open .bt-menu-trigger span:after {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.bt-menu ul {
position: fixed;
margin: 0;
padding: 0;
list-style: none;
}
.bt-menu ul:first-of-type {
top: 75px;
left: 0;
}
.bt-menu ul:nth-of-type(2) {
right: 0;
bottom: 0;
}
.bt-menu ul li,
.bt-menu ul li a {
display: block;
}
.bt-menu ul:nth-of-type(2) li {
float: left;
font-size: 0px;
}
.bt-menu ul li {
visibility: hidden;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}
.bt-menu.bt-menu-open ul:first-of-type li,
.bt-menu.bt-menu-open ul:nth-of-type(2) li {
visibility: visible;
opacity: 1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
transition: transform 0.3s, opacity 0.3s;
}
/* First menu */
.bt-menu ul:first-of-type li {
width: 150px;
height: 50px;
line-height: 50px;
-webkit-transform: translate3d(-100%,50%,0);
transform: translate3d(-100%,50%,0);
}
.bt-menu.bt-menu-open ul:first-of-type li {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Second menu */
.bt-menu ul:nth-of-type(2) li {
width: 60px;
height: 50px;
line-height: 50px;
-webkit-transform: scale(0);
transform: scale(0);
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:first-child {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(3) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(4) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li {
-webkit-transform: scale(1);
transform: scale(1);
}
.bt-menu ul li a {
display: block;
outline: none;
text-decoration: none;
}
.bt-menu ul:first-of-type li a {
padding: 0 20px;
box-shadow: inset 0 1px rgba(0,0,0,0.2);
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1em;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.bt-menu ul:first-of-type li:last-child a {
box-shadow: inset 0 1px rgba(0,0,0,0.2), inset 0 -1px rgba(0,0,0,0.2);
}
.bt-menu ul:nth-of-type(2) li a {
color: transparent;
text-align: center;
font-size: 0px;
}
.bt-menu ul li a:before {
color: #fff;
font-size: 24px;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.bt-menu ul:first-of-type li a:hover,
.bt-menu ul:first-of-type li a:focus,
.bt-menu ul li a:hover:before,
.bt-menu ul li a:focus:before {
color: #1abc9c;
}
Menü renkleri falan aynı kalacak sadece boyutları ayarlayacağım.
teşekkürler...
