مطالب عمومی

آموزش اسکریپت منوی چند سطحی با امکان رسپانسیو

مشاوره رایگان

برای مشاوره در زمینه
سایت و سئو
با ما تماس بگیرید.

شبکه های اجتماعی ما
دوره سئو مقدماتی

یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

1761 نفر
7 دقیقه
بروزرسانی در: آذر 1, 1400

فهرست مطالب

منوها یکی از قسمت های بسیار مهم در هر سایت هستند. اکثر وب سایت ها حداقل یک منو دارند که امکان دارد این منو به صورت چند سطحی باشد. با توجه به اینکه طراحی رسپانسیو یکی از موارد مهمی است که در طراحی وب سایت ها برای سازگار شدن سایت با deviceهای مختلف پیاده سازی میشود، لازم است تا منوها هم به صورت رسپانسیو طراحی شوند. در این آموزش jquery، کدنویسی یک منوی چند سطحی را که به حالت رسپانسیو طراحی شده است به شما آموزش میدهیم.

مشاهده دمو

[free_vip]

در ابتدا فایل های سی اس اس مورد نیاز را در بین تگ <head> اضافه میکنیم :

[html]

<link rel=”stylesheet” href=”css/normalize.min.css”>
<link rel=”stylesheet” href=”css/defaults.min.css”>
<link rel=”stylesheet” href=”css/nav-core.min.css”>
<link rel=”stylesheet” href=”css/nav-layout.min.css”>
<!–[if lt IE 9]>
<link rel=”stylesheet” href=”css/ie8-core.min.css”>
<link rel=”stylesheet” href=”css/ie8-layout.min.css”>
<script src=”js/html5shiv.min.js”></script>
<![endif]–>

[/html]

این کدها شامل کدهایی که برای مرورگر اینترنت اکسپلورر نیاز است نیز میباشد.

فایل ها nav-core.min.css و nav-layout.min.css جزء فایل های اصلی سی اس اس هستند که برای این منو لازم است حتما نوشته شوند.

[css]

.nav-lock-scroll {
overflow:hidden
}
.nav {
display:none;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:900;
overflow-x:hidden;
overflow-y:auto
}
.nav ul {
display:block;
position:relative;
zoom:1;
list-style-type:none;
margin:0;
padding:0
}
.nav a, .nav a:active, .nav a:hover, .nav a:visited {
display:block;
position:relative
}
@media only screen and (min-width:960px) {
.nav {
display:block;
position:relative;
bottom:auto;
overflow:visible
}
.nav li {
position:relative;
white-space:nowrap
}
.nav>ul>li {
display:inline-block;
float:right;
}
.nav ul {
display:block
}
.nav ul ul {
display:none;
position:absolute;
top:100%;
right:0;
z-index:901
}
.nav ul ul ul {
top:5px;
right:100%;
z-index:902
}
.nav ul ul ul ul {
z-index:903
}
.nav ul ul ul ul ul {
z-index:904
}
.nav-no-js .nav li:hover>ul {
display:block
}
}
@media only screen and (max-width:959px) {
.nav-no-js .nav-button:hover+.nav, .nav-no-js .nav-button:hover+.nav+.nav-close, .nav-no-js .nav:hover, .nav-no-js .nav:hover+.nav-close {
display:block
}
}

@font-face {
font-family:icon-font;
src:url(../fonts/icon-font.eot);
src:url(../fonts/icon-font.eot?#iefix) format(‘eot’), url(../fonts/icon-font.woff) format(‘woff’), url(../fonts/icon-font.ttf) format(‘truetype’), url(../fonts/icon-font.svg#icon-font) format(‘svg’)
}
.icon-desktop:before, .icon-menu-close:before, .icon-menu:before, .icon-mobile:before, .icon-submenu-down:before, .icon-submenu-right:before, .icon-world:before, .nav .nav-submenu>a:after, .nav-button:before, .nav-close:before, .nav>ul>.nav-submenu>a:after, header h1:before {
font-family:icon-font;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-style:normal;
font-variant:normal;
font-weight:400;
text-decoration:none;
text-transform:none;
vertical-align:top
}
.icon-desktop:before {
content:”\E001″
}
.icon-menu-close:before {
content:”\E002″
}
.icon-menu:before {
content:”\E003″
}
.icon-mobile:before {
content:”\E004″
}
.icon-submenu-down:before {
content:”\E005″
}
.icon-submenu-right:before {
content:”\E006″
}
.icon-world:before {
content:”\E007″
}
body {
padding-top:4.4rem
}
header {
display:block;
position:fixed;
top:0;
left:0;
right:0;
z-index:901;
padding-left:10px;
line-height:4.4rem;
background:#26201C;
color:#A69A94
}
header h1 {
margin:0;
font-size:1.7rem;
line-height:4.4rem
}
header h1:before {
content:”\E004″;
margin-right:8px
}
.nav-button, .nav-close {
position:fixed;
top:0;
width:2.4rem;
height:4.4rem;
overflow:hidden;
z-index:902;
cursor:pointer;
text-decoration:none;
line-height:4.4rem;
background:#3ebdea;
color:#fff;
}
.nav-button:before, .nav-close:before {
display:block;
text-align:center
}
.nav-button {
display:block;
right:1rem;
font-size:1.7rem
}
.nav-button:before {
content:”\E003″
}
.nav-close {
display:none;
right:4rem;
font-size:1.9rem
}
.nav-close:before {
content:”\E002″
}
.nav {
margin:5px;
line-height:30px;
height:30px;
color:#A69A94;
border:1px solid #bdc7cd;
background:#fff;
-moz-box-shadow: inset 0 0 5px 5px #f4f4f4;
-webkit-box-shadow: inset 0 0 5px 5px #f4f4f4;
box-shadow: inset 0 0 5px 5px #f4f4f4;
}
.nav ul {
}
.nav ul ul {
background:#eaeaea;
}
.nav li {
border-top:1px solid #bdc7cd;
}
.nav li.nav-active>a, .nav li:hover>a {
color:#3ebeda ;
}
.nav .nav-submenu>ul {
margin-right:10px
}
.nav .nav-submenu>a {
padding-left:30px!important
}
.nav a, .nav a:active, .nav a:hover, .nav a:visited {
padding:0 10px;
color:#838383;
text-decoration:none;
}
.nav .nav-submenu>a:after {
position:absolute;
display:block;
left:10px;
top:1px;
content:”\E005″
}
.nav .nav-submenu li>a:after {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg); /* Standard syntax */
}
@media only screen and (min-width:960px) {
body {
padding:0!important
}
header {
position:relative
}
header h1:before {
content:”\E001″
}
.nav-button {
display:none
}
.nav>ul>li {
border-top:none
}
.nav li>ul {
box-shadow:0 0 5px 0 rgba(0, 0, 0, .75)
}
.nav ul ul ul li:first-child {
border-top:none
}
.nav .nav-submenu li {
min-width:110px;
}
.nav .nav-submenu>ul {
margin:0
}
.nav>ul>.nav-submenu>a:after {
content:”\E005″
}
.nav .nav-submenu>a:after {
content:”\E006″
}
}
@media only screen and (max-width:979px) {
.nav { padding-top:4.4rem; height:auto;}
.nav .nav-submenu li>a:after {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari */
transform: rotate(0deg); /* Standard syntax */
}
}

[/css]

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

[html]

<a href=”#” class=”nav-button”>Menu</a>
<nav class=”nav”>
<ul>
<li><a href=”#”>صفحه اصلی</a></li>
<li><a href=”#”>درباره ما</a></li>
<li class=”nav-submenu”><a href=”#”>خدمات</a>
<ul>
<li><a href=”#”>پشتیبانی</a></li>
<li><a href=”#”>فروش</a></li>
<li><a href=”#”>طراحی سایت</a></li>
<li><a href=”#”>طراحی لوگو</a></li>
</ul>
</li>
<li class=”nav-submenu”><a href=”#”>نمونه کار</a>
<ul>
<li><a href=”#”>قالب شرکتی</a></li>
<li class=”nav-submenu”><a href=”#”>قالب اختصاصی</a>
<ul>
<li><a href=”#”>قالب گالری عکس</a></li>
<li class=”nav-submenu”><a href=”#”>قالب پزشکی</a>
<ul>
<li class=”nav-submenu nav-left”><a href=”#”>قالب شرکتی</a>
<ul>
<li><a href=”#”>قالب مذهبی</a></li>
<li><a href=”#”>قالب تفریحی</a></li>
<li><a href=”#”>قالب عکس</a></li>
</ul>
</li>
<li><a href=”#”>قالب خبری</a></li>
<li><a href=”#”>قالب دولتی</a></li>
</ul>
</li>
<li><a href=”#”>قالب غیر اختصاصی</a></li>
</ul>
</li>
<li><a href=”#”>تماس با ما</a></li>
<li><a href=”#”>Ice Cream</a></li>
</ul>
</li>
<li class=”nav-submenu”><a href=”#”>تماس با ما</a>
<ul>
<li><a href=”#”>ارسال فرم</a></li>
<li><a href=”#”>تماس تلفنی</a></li>
<li><a href=”#”>آدرس</a></li>
</ul>
</li>
<li><a href=”#”>فروشگاه</a></li>
</ul>
</nav>
<a href=”#” class=”nav-close”>Close Menu</a>

[/html]

در انتها کدهای جی کوئری را اضافه میکنیم :

[html]

<script src=”js/jquery1.11.2.min.js”></script>
<script src=”js/nav.jquery.min.js”></script>
<script>
$(‘.nav’).nav();
</script>

[/html]

شما میتوانید فایل کامل این اسکریپت را از لینک پایین دانلود کنید :

 

[/free_vip]

1.5/5 - (2 امتیاز)
2 دیدگاه
انتشار: مهر 18, 1394
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
طراحی سایت خود را به ما بسپارید!
همین حالا برای مشاوره رایگان اقدام کنید.
  • سلام . ممنون از کارتون
    چطوری میشه تبدیلش کرد به فهرست وردپرس / لطفا این کار رو هم انجام بدید

  • سلام آموزش تصویری برای این نوع منوهای ریسپانسیو چند سطحی ندارین؟

آیا نیازمند راهنمایی هستید؟
همین حالا برای مشاوره رایگان اقدام کنید
با پر کردن فرم، یک قدم به رشد آنلاین نزدیک‌تر شوید!
فرم درخواست مشاوره

برای راحتی شما عزیزان می‌توانید اطلاعات خود را در کادر زیر وارد کنید تا کارشناسان ما با شما تماس بگیرند

مشاوره رایگان
پیمایش به بالا