سجاد عباسی
9 سال پیش
خب کد را برای استفاده دیگران هم قرار بدید!
بروز خطا
[message]
اشتراک در سوال
رای ها
[dataList]
پرسش و پاسخ
منو ریسپانسیو مثل سایت انکو ایکس. حل شد
مدیریت گفتگو
با سلام از دوستان من می خواهم یک منو ریسپانسیو درست کنم مثل خود سایت انکو اکس که در همه سایز ها ثابت باشه...
اما خیلی سرچ کردم به نتیجه نرسیدم و راست به چپ پیدا نکردم.
خودم توانستم چب به راست را درست کنم.. اما راست به چپ را نتونستم... ممن،ن میشم کسی راهنمایی کنه..
پاسخ‌ها 2
مشاهده پاسخ صحیح
پاسخ صحیح
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mohami</title>
<link rel="stylesheet" href="../css/them.css">
<link rel="stylesheet" href="../css/ar_them.css">
<link href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet">
<script >
$("body select").msDropDown();
</script>
</head>
<body>
<div id="toggletop">
<span id="shareicon"><a href="#"><img src="../img/share.png"/></span></a>
<span id="titleofapp">بوابة المحامين</span>
</div>
<nav>
<a href="#" class="nav-toggle-btn"> </a>
<ul>
<li><a href="armenu.php">الصفحة الرئيسية</a></li>
<li><a href="#">قائمة المحامين</a></li>
<li><a href="armenu.php">الأقسام </a></li>
<li><a href="#">المدونة</a></li>
<li><a href="news.php">أخبارنا</a></li>
<li><a href="ar_about.php">من نحن </a></li>
<li><a href="#">إتصل بنا</a></li>
</ul>
</nav>
<div class="content">
<div id="hidden"></div>
<div class="banner"><img src="../img/banner.jpg" /></div>
<div class="center">
<a href="ecommerce.php">
<div class="secsions">
<span id="titlelaw">قانون الإداري </span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw">قانون الاسرة احوال شخصية</span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون الايجارات</span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون التجاري </span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون الجزائي </span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون العمالي </span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون المدني </span>
<span id="piclaw"></span>
</div>
</a>
</div>
</div>
<footer>
<div class="center">
<a href="#"><div class="foot1">اتصل بنا</div></a>
<a href="#"><div class="foot1">اخبارنا</div></a>
<a href="#"><div class="foot1">قائمة المحامية</div></a>
<a href="#"><div class="foot1">الاقسام</div></a>
</div>
</footer>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
(function(){
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
Css Code
*{
padding: 0px;
margin:0px;
}
body{
overflow-x: hidden;
background-color: #e6e6e6;
}
div#toggletop {
width: 100%;
height: 48px;
background: #de5252;
display: block;
position: fixed;
overflow: overlay;
z-index: 1000;
}
nav{
width: 270px;
background: #484848;
position: fixed;
right: 0px;
bottom: 0;
top: 0;
z-index: 1000;
transform: translate3d(270px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul{
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
color: #fff;
padding: 10px 0px;
}
.nav-toggle-btn{
display: block;
position: absolute;
right: 270px;
width: 48px;
height: 48px;
background-image: url("../img/togg.png");
}
.content {
height: auto;
transition: transform 0.4s ease;
background: #e6e6e6;
padding-bottom: 40px;
}
.active-nav .content{
transform: translate3d(-200px, 0, 0);
}
نظرات
سجاد عباسی
9 سال پیش
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mohami</title>
<link rel="stylesheet" href="../css/them.css">
<link rel="stylesheet" href="../css/ar_them.css">
<link href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet">
<script >
$("body select").msDropDown();
</script>
</head>
<body>
<div id="toggletop">
<span id="shareicon"><a href="#"><img src="../img/share.png"/></span></a>
<span id="titleofapp">بوابة المحامين</span>
</div>
<nav>
<a href="#" class="nav-toggle-btn"> </a>
<ul>
<li><a href="armenu.php">الصفحة الرئيسية</a></li>
<li><a href="#">قائمة المحامين</a></li>
<li><a href="armenu.php">الأقسام </a></li>
<li><a href="#">المدونة</a></li>
<li><a href="news.php">أخبارنا</a></li>
<li><a href="ar_about.php">من نحن </a></li>
<li><a href="#">إتصل بنا</a></li>
</ul>
</nav>
<div class="content">
<div id="hidden"></div>
<div class="banner"><img src="../img/banner.jpg" /></div>
<div class="center">
<a href="ecommerce.php">
<div class="secsions">
<span id="titlelaw">قانون الإداري </span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw">قانون الاسرة احوال شخصية</span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون الايجارات</span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون التجاري </span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون الجزائي </span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون العمالي </span>
<span id="piclaw"></span>
</div>
</a>
<a href="criminal.php">
<div class="secsions">
<span id="titlelaw"> قانون المدني </span>
<span id="piclaw"></span>
</div>
</a>
</div>
</div>
<footer>
<div class="center">
<a href="#"><div class="foot1">اتصل بنا</div></a>
<a href="#"><div class="foot1">اخبارنا</div></a>
<a href="#"><div class="foot1">قائمة المحامية</div></a>
<a href="#"><div class="foot1">الاقسام</div></a>
</div>
</footer>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
(function(){
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
Css Code
*{
padding: 0px;
margin:0px;
}
body{
overflow-x: hidden;
background-color: #e6e6e6;
}
div#toggletop {
width: 100%;
height: 48px;
background: #de5252;
display: block;
position: fixed;
overflow: overlay;
z-index: 1000;
}
nav{
width: 270px;
background: #484848;
position: fixed;
right: 0px;
bottom: 0;
top: 0;
z-index: 1000;
transform: translate3d(270px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav{
transform: translate3d(0, 0, 0);
}
nav ul{
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
color: #fff;
padding: 10px 0px;
}
.nav-toggle-btn{
display: block;
position: absolute;
right: 270px;
width: 48px;
height: 48px;
background-image: url("../img/togg.png");
}
.content {
height: auto;
transition: transform 0.4s ease;
background: #e6e6e6;
padding-bottom: 40px;
}
.active-nav .content{
transform: translate3d(-200px, 0, 0);
}
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
نظرات