مطالب عمومی

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

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

مشاهده دمو

[free_vip]

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

[html]

[/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]

[/html]

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

[/free_vip]

1.5/5 - (2 امتیاز)

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

پست های اخیر

سئو خارجی سایت چیست؟ (راهنمای استراتژی های OFF PAGE SEO)

اصول بازاریابی محتوایی چیست؟ (10 اصل تا رسیدن به موفقیت)

تولید محتوا چیست و چه کاربردی دارد؟

چطور محتوای جذاب تولید کنیم؟ (10 گام طلایی برای رکورد بازدید از سایت)

مراحل اصلی در فرایند سئو چیست؟

آنلاینر در شبکه های اجتماعی

دیدگاه‌ خود را بنویسید لغو پاسخ