theahoura

واکنشگرا کردن منوی قالب در موبایل

2 پست در این موضوع قرار دارد

من در مخفی کردن منو در زمان استفاده از موبایل مشکل دارم. وقتی روی منو هاور میکنم منو ها مرتب و زیر هم نشون داده نمیشه . مشکل از کجاست ؟


کد سی اس اس :
/* 480px nav MEDIA QUERIES Style
------------------------------------------ */
@media screen and (max-width: 480px) {
body{
background: url(fotos/pattern.png);
font-size: 120%;
}
header{
width: 100%;
font-size: 60%;
}
nav {
position: relative;
min-height: 40px;
}
nav ul {
width: 100px;
padding: 5px 0;
position: absolute;
border: solid 1px #aaa;
background: #fff url(images/icon-nav.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
margin: 0 10px 10px 0;
}
nav li {
display: none;
margin: 0;
font-size: 80%;
border-bottom-color:#FFF;
border-bottom-style:solid;
border-bottom-width:1px;
text-align:center;
padding:1px;
}
nav a {
display: block;
text-align: left;
}
nav ul:hover {
background-image: none;
}
nav ul:hover li {
display: block;
text-align: center;
margin: 0 0 5px;
}


کد اج تی ام ال »
<nav>
<ul>
<li><a href="http://localhost/custompage">Home</a></li>
<li><a href="http://localhost/wordpress/?page_id=52">News</a></li>
<li><a href="http://localhost/wordpress/?page_id=2">Download<a/></li>
<li><a href="http://localhost/wordpress/?page_id=30">Customer Telling</a></li>
<li><a href="http://localhost/wordpress/?page_id=48">Help Desk</a></li>
<li><a href="http://localhost/wordpress/?page_id=4">Industry Insights</a>
<ul>
<li><a href="http://localhost/wordpress/?page_id=56">Document</a></li>
<li><a href="http://localhost/wordpress/?page_id=6">E-learning</a></li>
</ul>
</li>
<li><a href="http://localhost/wordpress/?page_id=46">F.A.Q</a></li>
<li><a href="http://localhost/wordpress/?page_id=50">Ask The Community</a></li>
</ul>
</nav>

0

به اشتراک گذاری این پست


لینک به پست

اینه؟! :)

http://jsfiddle.net/8XmS6/

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری