به هم ریختن منوی اصلی سایت زمان کوچک وبزرگ شدن صفحه

ساخت وبلاگ

آخرین مطالب

امکانات وب

به هم ریختن منوی اصلی سایت زمان کوچک وبزرگ شدن صفحه

سلام دوستان
من یه منو طراحی کردم که وقتی صفحه رو کوچیک میکنم منوهای من به دو سطر تبدیل میشن وحالت ریسپانسیو خودشون رو از دست میدن
میشه راهنماییم کنید
این کد منوهای من هست:

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/zerogrid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/responsiveslides.css">
</head>
<body>
<div class="wrap-body">
<!--////////////////////////////////////Header-->
<header>
<div class="zerogrid">
<nav id="menu-wrap"><div id="menu-trigger">Menu</div> 
<ul id="menu" style="display: none;">
<li><a href="#">خانه</a></li>
<li>
<a href="Product.html">محصولات</a>
<ul>
<li>
<a href="#">کیف مجلسی</a>
</li>
<li>
<a href="#">کیف دوشی</a>
</li>
<li>
<a href="#">کیف شب</a>
@*<ul>
<li><a href="#">Item 31</a></li>
<li><a href="#">Item 32</a></li>
</ul>*@
</li>
<li>
<a href="#">دستبند چرم</a>
@*<ul>
<li><a href="#">Item 41</a></li>
<li><a href="#">Item 42</a></li>
<li><a href="#">Item 43</a></li>
<li><a href="#">Item 44</a></li>
</ul>*@
</li>
</ul>
</li>
<li><a href="single.html">پرفروش ترین ها</a></li>
<li><a href="single.html">تخفیف خورده ها</a></li>
<li><a href="single.html">درباره ما</a></li>
<li><a href="contact.html">تماس با ما</a></li>
</ul>
</nav>
</div>
</header>
</div>
</body></html>

اینم فایل استایل من:

/* You don't need the above styles, they are demo-specific ----------- */
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 100%;
margin: 40px auto;
border: 1px solid #222;
background-color: #222;
background-image: -moz-linear-gradient(#555, #222); 
background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222)); 
background-image: -webkit-linear-gradient(#555, #222); 
background-image: -o-linear-gradient(#555, #222);
background-image: -ms-linear-gradient(#555, #222);
background-image: linear-gradient(#555, #222);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: right;/*az left be right.menu asli rastchin shod.ama menu mobile kheyr*/
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 60px;/*be jaye 60 30 bood vali chon man tedad kami dashtam khastam kole menu ra por konan.agar teded bishtar shavad bayad in ra be 30 tagheer daham.
*/ 
color: #bbb;
text-transform: uppercase;
font: bold 14px tahoma;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0; 
z-index: 1; 
background: #444;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background: -webkit-linear-gradient(#444, #111); 
background: -o-linear-gradient(#444, #111); 
background: -ms-linear-gradient(#444, #111); 
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; 
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: -150px;/*az 150 be -150 taghyeer dadam.baes shod zir majmee be tarfe rast beravad*/
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3); 
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child { 
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; 
}
#menu ul a { 
padding: 10px;
width: 165px;/*tagheer andazeye zir menu mahsulat*/
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #F26324;
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
right: 40px;/*left bud ke be right taghyeer dadam va jahat flash zir menu ro dorost kardam*/
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
right: -6px;/*flash zirmenu ha tagheer jahat dad*/
top: 50%;
margin-top: -6px;
border-left: 0; 
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #F26324; 
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #F26324; 
border-bottom-color: transparent; 
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
/* Mobile */
#menu-trigger {
display: none ;
/*text-align:right;*/
}
@media screen and (max-width: 600px) {
/* nav-wrap */
#menu-wrap {
position: relative;
}
#menu-wrap * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* menu icon */
#menu-trigger {
display: block; /* show menu icon */
height: 40px;
line-height: 40px;
cursor: pointer; 
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
font-weight: bold;
background-color: #111;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAAD eWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5c cllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4On htcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1w dGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3Ny wgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpS REYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5Lz AyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlv biByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYW RvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDov L25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZW Y9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9S ZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUG hvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlE PSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MU YxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAx NjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOk Rlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6 MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0Um VmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFF MThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb2 4+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn9 32AAAAAElFTkSuQmCC) no-repeat 95% center, linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
/* main nav */
#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
background-color: #444;
display: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; 
/*text-align:right;*/
}
#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
} 
#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; 
}
#menu ul ul {
margin: 0 0 0 20px !important;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; 
}
#menu li {
position: static;
display: block;
float: none;
border: 0;
margin-right : 5px;
margin-bottom :5px;
margin-top:5px;
margin-left:5px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; 
text-align:right;/*rastchin kardane menu*/ 
}
#menu ul li{
margin-right: 40px;/*tanzime turaftegi*/
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu a{
display: block;
float: none;
padding: 0;
color: #999;
}
#menu a:hover{
color: #fafafa;
} 
#menu ul a{
padding: 0;
width: auto; 
}
#menu ul a:hover{
background: none;
}
#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
} 
}
@media screen and (min-width: 600px) {
#menu {
display: block !important;
}
} 
/* iPad */
.no-transition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
opacity: 1;
visibility: visible;
display:none; 
}
#menu li:hover > .no-transition {
display: block;
}

برنامه نویس...
ما را در سایت برنامه نویس دنبال می کنید

برچسب : به هم ریختن زیرنویس فارسی,به هم ریختن فونت ورد,به هم ریختن صفحه,به هم ریختن متن در word,به هم ریختن کیبورد,به هم ریختن فونت در ورد,به هم ریختن حروف صفحه کلید,به هم ریختن فایل ورد,به هم ریختن کلمات در word,به هم ریختن فونت, نویسنده : محمد رضا جوادیان programers بازدید : 210 تاريخ : دوشنبه 22 شهريور 1395 ساعت: 19:36

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه