ساخت منوی آبشاری ریسپانسیو عمودی با روشی ساده

ساخت منوی آبشاری ریسپانسیو عمودی با روشی سادهReviewed by جواد نبوی on Feb 2Rating: 5.0

سلام عرض می کنم خدمت شما دوستان عزیز؛

حتما خیلی از شما ها با فریمورک محبوب بوت استرپ آشنا هستید. فریم ورکی که امکان ساخت قالب های واکنشگرا با روشی ساده تر به ما میدهد. یکی از قابلیت هایی که بوت استرپ در اختیار ما میگذارد امکان ایجاد منوی آبشاری ریسپانسیو (واکنشگرا) است. اما نکته ای که وجود دارد این است که بوت استرپ فقط امکان ایجاد منوی آبشاری ریسپانسیو افقی را در اختیار ما قرار میدهد. منظورمان از منوی افقی چیست؟ خب, منظورمان این است که در این نوع منو, با کلیک روی دکمه باز کننده آن (در صفحات با سایز کوچک مثل موبایل), محتویات و دکمه های موجود در منو به صورت کشویی و از بالا به پایین باز می شوند. اما خیلی ها این طوری نمیخواهند. خیلی ها میخواهند در صفحات نمایش با سایز های کوچکتر, با کلیک روی دکمه باز کننده, منو به صورت کشویی و از سمت راست یا چپ صفحه باز شود. اما این دسته از عزیزان باید بدانند که بوت استرپ به صورت پیشفرض این قابلیت را ندارد. بنابراین باید حرکات دیگری زد! ما اینجا هستیم تا این کار را به شما یاد بدهیم.

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

منوی آبشاری ریسپانسیو عمودی

آموزش ساخت منوی آبشاری ریسپانسیو عمودی

برای ساخت منوی آبشاری ریسپانسیو عمودی به یکسری چیزها نیاز داریم. این چیز ها را در زیر می بینید:

  1. فریم ورک بوت استرپ ۳
  2. کتابخانه جی کوئری

توجه داشته باشید با این آموزش می توانید منوی آبشاری ریسپانسیو عمودی را در هر نوع صفحه ای قرار دهید. مثلا میتوانید این منو را به قالب وردپرستان اضافه کنید یا به یک صفحه html استاتیک. ما هم طوری آموزش می دهیم که در هرجا خواستید استفاده کنید مشکلی نداشته باشید.

اول از همه, باید بوت استرپ و جی کوئری را به پروژه مان اضافه کنیم. بدین منظور برای دانلود بوت استرپ ۳ از لینک زیر استفاده کنید:

بعد از دانلود, فایل را از حالت فشرده خارج کنید. با انجام این کار, سه فولدر به نام های js, css, fonts خواهید داشت.

منوی آبشاری ریسپانسیو عمودی

در مرحله بعد باید این سه فولدر را به محل پروژه تان انتقال دهید. یعنی جایی که فایل index.php یا index.html تان قرار دارد. اگر پروژه تان قالب وردپرس است, باید این سه فولدر را در مسیر اصلی فولدر قالبتان قرار دهید.

سپس در همان جایی که بوت استرپ را وارد کردید, یک فایل با نام menu.css ایجاد کنید.

توجه: برای اینکه بتوانید فایلی با پسوند css ایجاد کنید باید مطمئن شوید که تیک Hide extentions for known file types در تنظیمات سیستم تان برداشته شده است. بدین منظور وارد Control Panel سیستم خود شوید. سپس روی Folder Options کلیک کنید. در پنجره Folder Options , در بخش Advanced settings مطمئن شوید که تیک گزینه Hide extentions for known file types برداشته شده است. اگر اینطور نبود, تیک آنرا بردارید. سپس روی OK کلیک کنید.

منوی آبشاری ریسپانسیو عمودی

در این مرحله, باید کد های فراخوانی بوت استرپ را در فایل ایندکس قالب یا پروژه تان قرار دهید. اگر پروژه تان یک قالب استاتیک است کد زیر را قبل از تگ <head/> قرار دهید:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-3.2.rtl.css" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">

اما اگر پروژه تان یک قالب وردپرس است, کد زیر را قبل از تگ <head/> قرار دهید. (این تگ معمولا در فایل header.php قالب قرار دارد):

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/bootstrap-3.2.rtl.css" type="text/css">
<link href="<?php bloginfo('template_directory'); ?>/menu.css" rel="stylesheet" type="text/css">

با انجام اینکار, هم بوت استرپ را نصب کرده اید و هم فایل menu.css که استایل های اصلی منوی مان در آن قرار دارد را به قالب متصل کرده اید.

منوی آبشاری ریسپانسیو عمودی وردپرس

حالا باید کتابخانه جی کوئری را به قالبتان وصل کنید. برای اینکار کد زیر را قبل از تگ <head/> و بعد از کد های بالا قرار دهید:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>

البته ما در اینجا آدرس کتابخانه ی جی کوئری گوگل را داده ایم که دلیلش هم سرعت بالاتر و کش شدن آن در مرورگر همه ی کاربران است. اما شما میتوانید آدرس دیگری را قرار دهید.

نکته ی دیگری هم که وجود دارد این است که گاهی جی کوئری در بعضی از قالب ها عمل نمی کند. در این موارد باید کد بالا را دقیقا قبل از تگ <body/> در قالبتان قرار دهید.

منوی آبشاری ریسپانسیو عمودی

بعد از انجام همه ی این کار ها, پیش نیاز های ما برای ایجاد منوی آبشاری ریسپانسیو عمودی فراهم شده اند. حالا باید خود منو را ایجاد کنیم. پس با ادامه ی آموزش همراه باشید.

ایجاد منوی آبشاری ریسپانسیو عمودی

۱- فایل menu.css را با یک ویرایشگر باز کنید و کد زیر را درون آن قرار دهید:

/*-----------lg-md-sm-------------*/
@media (min-width:768px) {
#main {
    clear: both;
    position: relative;
    padding: 0;
    margin: 0;
}
.top-menu-xs {
    width: 100%;
    margin-top: 0;
    z-index: 1000;
    margin-bottom: 0;
    padding-top: 0;right: 0 !important;
    float: right;
    list-style: outside none none;
    background: #4BBBD1;
    position: absolute;
}
.navbar-xs {
    padding: 0px;
    height: 50px;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
}
.top-menu-xs li {
    float: right;
    margin: 0;
    font-size: 1em;
    height: 50px;
}
.top-menu-xs li:hover {
    background: #70C9EC;
}
.top-menu-xs li a {
    width: 100%;
    color: #fff;
    height: 52px;
    float: right;
    text-decoration: none;
    font-family: tahoma;
    padding: 15px 15px 0 15px;
}
.top-menu-xs li a:hover {
    color: #FFF;
}
.zirmenu-xs {
    display: none;
    list-style: outside none none;
    position: absolute;
    width: 200px;
    padding: 0px;
    background: #FBFBFB;
    float: right;
    margin: 52px 0px 0px;
    border-right: 2px solid #F6A1A1;
}
.top-menu-xs li:hover .zirmenu-xs {
    display: block;
}
.zirmenu-xs li {
    width: 100%;
    height: auto !important;
    float: right;
    padding: 0;
}
.zirmenu-xs li a {
    color: #666;
    height: auto !important;
    padding: 6px 7px 6px 7px;
    font-size: 12px;
    border-bottom: 1px sdolid #eee;
    width: 100%;
}
.zirmenu-xs li a:hover {
    color: #fff;
    height: auto !important;
    padding: 6px 7px 6px 7px;
    font-size: 12px;
    background: #F6A1A1;
    border-bottom: 1px sdolid #eee;
}
}
@media (max-width:768px) {
/*-----------xs-------------*/
#main {
    clear: both;
    position: relative;
    padding: 0;
    margin: 0;
}
.menu-koochak {
    float: right;
    background: transparent;
    border-radius: 3px;
    margin-top: 1.7em;
    border: 1px solid #fff;
    margin-right: 10px;
    margin-left: 0;
}
.icon-bar {
    background-color: #fff;
}
.top-menu-xs {
    background: #E4E7E7;
    width: 200px;
    margin-top: -2px;
    height: 100%;
    z-index: 1000;
    padding-top: 10px;
    float: right;
    right: -26%;
    position: fixed;
    display: none;
    list-style: none;
    overflow-y: scroll;
    overflow-x: hidden;
}
.navbar-xs {
    background: #5FC1E7;
}
.top-menu-xs li {
    background: #E1E1E1;
    float: right;
    width: 200px;
    border-bottom: 1px solid #DADADA;
    margin-right: -40px;
    font-size: 0.8em;
}
.top-menu-xs li a {
    width: 100%;
    color: #333;
    padding: 5px 15px 5px 0;
    float: right;
    text-decoration: none;
    font-family: tahoma;
}
.top-menu-xs li a:focus {
    background: #666;
    color: #FFF;
}
.zirmenu-xs {
    display: none;
    list-style: none;
}
.zirmenu-xs li a {
    color: #666;
}
.navbar-xs {
    float: right;
    width: 100%;
}
#black {
    display: none;
    background: #000;
    opacity: 0.4;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 1000;
}
}

سپس فایل را ذخیره کنید.

۲- کد زیر را درست بعد از شروع تگ <body> قرار دهید. توجه داشته باشید که بین تگ <body> و کد زیر, چیز دیگری قرار نداشته باشد.

<div id="main"> 
<a href="#"><div id="black"></div><!--black--></a>

منوی آبشاری ریسپانسیو عمودی

۳- کد زیر را قبل از تگ <body/> قرار دهید. بین این کد و تگ <body/> هم چیزی قرار نگیرد.

</div><!--main-->

منوی آبشاری ریسپانسیو عمودی
۴- حالا باید خود منو را به قالب اضافه کنیم. کد زیر را به جایی که میخواهید منو نمایش داده شود اضافه کنید:

<nav class="navbar navbar-light navbar-xs ">
 <button  id="xsmenu" type="button" class="navbar-toggle menu-koochak"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
 <div class="sub" id="myNavbar">
 <ul class="top-menu-xs">
 کد لینک ها در اینجا قرار میگیرد
 </ul>
 <!--nav navbar-nav-->
 </div>
 </nav>

سپس برای اینکه دکمه ها و لینک های منو را درونش قرار دهید, باید کد های مربوط به لینک ها را در قسمتی از کد بالا که مشخص شده قرار دهید. یعنی جایی که نوشته شده کد لینک ها در اینجا قرار میگیرد . حالا کد لینک چه چیزی است؟ خب کد لینک ها به دو صورت هستند. لینک های بدون زیرمنو و لینک های با زیرمنو. لینک های با زیرمنو لینک هایی هستند که با قرار گرفتن موس روی آنها, یک زیر منو در زیرشان ظاهر میشود. اما لینک های بدون زیرمنو, آن هایی هستند که با قرار گرفتن موس رویشان هیچ زیرمنویی در زیرشان ظاهر نمیشود. (البته این اسم ها را از خودم در آورده ام. زیاد سخت نگیرید!)

منوی آبشاری ریسپانسیو عمودی

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

<li> <a href="url">متن لینک</a></li>

در کد بالا, به جای عبارت متن لینک باید عنوان لینک مورد نظرتان را قرار دهید (مثلا: تبلیغات). و به جای عبارت url باید آدرس آن لینک را قرار دهید (مثلا آدرس صفحه تبلیغات). البته http:// را قبل از آدرس فراموش نکنید.

همچنین به هر تعداد لینکٍ بدون زیر منو که میخواهید اضافه کنید باید کد بالا را کپی کرده و زیر هم قرار دهید. مثلا:

<li> <a href="http://webtoaster.ir">صفحه اصلی</a></li>
 <li> <a href="http://webtoaster.ir/ads">تبلیغات</a></li>
 <li> <a href="http://webtoaster.ir/contact">تماس با ما</a></li>

برای اینکه یک لینکٍ با زیرمنو اضافه کنید کافیست کد زیر را قرار دهید.

<li id="flipxs"><a href="#">متن لینک </a>
 <ul class="zirmenu-xs">
 <li><a href="url">متن لینک اول زیرمنو</a></li>
 <li><a href="url">متن لینک دوم زیرمنو</a></li>
 </ul>
 </li>

این کد فقط یک لینک ایجاد می کند که دارای یک زیرمنو با دو لینک درونش است. برای تغییر دادن عنوان لینک اصلی, عبارت “متن لینک” را تغییر دهید. در اینجا توجه داشته باشید که نمیتوانید آدرسی تعیین کنید تا با کلیک روی لینک به آنجا برود. فقط برای لینک های موجود در زیرمنو میتوانید آدرس تعیین کنید. برای تغییر متن لینک های زیرمنو ها هم عبارت های متن لینک اول زیرمنو و متن لینک دوم زیرمنو را عوض کنید. همچنین برای تعیین آدرس مقصد لینک های زیرمنو, عبارت های url را تغییر دهید (آدرس با http:// باشد).

اگر میخواهید لینک های بیشتری به زیرمنو اضافه کنید, کد زیر را به تعداد دلخواه زیر لینک های موجود قرار دهید:

<li><a href="url">متن لینک سوم و ... زیرمنو</a></li>

همچنین اگر میخواهید تعداد لینک های زیرمنو دار را افزایش دهید, همان کدی که معرفی کردیم را زیر هم تکرار کنید. به مثال زیر توجه کنید:

<li id="flipxs"><a href="#">آموزش </a>
 <ul class="zirmenu-xs">
 <li><a href="http://webtoaster.ir/programming">برنامه نویسی وب</a></li>
 <li><a href="http://webtoaster.ir/photoshop">فتوشاپ</a></li>
 <li><a href="http://webtoaster.ir/seo">سئو</a></li>
 <li><a href="http://webtoaster.ir/trick">ترفند</a></li>
 </ul>
 </li>
 <li id="flipxs"><a href="#">ابزار </a>
 <ul class="zirmenu-xs">
 <li><a href="http://webtoaster.ir/theme">پوسته</a></li>
 <li><a href="http://webtoaster.ir/plugin">پلاگین</a></li>
 </ul>
 </li>

نتیجه کد بالا را در این صفحه میتوانید مشاهده کنید.

منوی آبشاری ریسپانسیو عمودی وردپرس

نتیجه نهایی کد های من به این شکل شد (برای اندازه بزرگتر روی آن کلیک کنید):

منوی آبشاری ریسپانسیو عمودی

ضمناً اگر میخواهید لینک های زیرمنو ها به صورت اتوماتیک از دسته های موردنظرتان در وردپرس اضافه شوند لینک زیر را ببینید:

»نمایش زیر دسته های دسته ای خاص در وردپرس

۵- تنها چیزی که باقیمانده, پویا کردن منو در حالت ریسپانسیو است. یعنی کاری کنیم که در صفحات نمایش کوچکتر, منو از سمت راست صفحه وارد صفحه شود. برای اینکار کد زیر را قبل از عبارت </div><!--main--> قرار دهید (اگر یادتان باشد این عبارت را در مراحل قبل اضافه کرده بودید و گفتیم بین این عبارت و تگ <body/> هیچ کد دیگری قرار ندهید.)

<script>
 $(document).ready(function(){
 <!--menus-->
 $(".sub ul li").click(function(){
 $(this).children("ul").slideToggle("fast");
 });
 $("#xsmenu").click(function(){
 $("#main").animate({left:'-200px'});
 $("#black").css("display","block");
 $(".top-menu-xs").css("display","block");
 $(".top-menu-xs").animate({right:'0%'});
 });
 $("#black,.removeicon").click(function(){
 $("#main").animate({left:'0px'});
 $("#black").css("display","none");
 $(".top-menu-xs").animate({right:'-200px'});
 $(".search-box").animate({width:'0px',height:'0px',margin:'20% 50%'},[,'fast']);
 });
 <!--menus-->
 });
 </script>

توجه داشته باشید که کد بالا و آنچه بعد از آن در قالبتان قرار دارد, آخرین کد های قالب باشند. و کد های دیگر قالب را قبل از شروع کد بالا قرار دهید. مثل تصویر زیر:

منوی آبشاری عمودی ریسپانسیو

حالا میتوانید نتیجه را ببینید. این صفحه را باز کنید و آنقدر زوم کنید تا دکمه کوچک منو ظاهر شود سپس رویش کلیک کنید. به همین راحتی! توانستید یک منوی آبشاری ریسپانسیو عمودی بسازید. خوب بود؟! پروژه ما را هم میتوانید از زیر دانلود کنید. خوش باشید.

لينک دانلود:

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

27 دیدگاه برای “ساخت منوی آبشاری ریسپانسیو عمودی با روشی ساده”

  1. محمد کریمی گفت:

    عالی بود دمتون گرم

  2. علی گفت:

    سلام خیلی خوب بود ولی وقتی بر می گرده به حالت عادی تنظیم منوی افقی بهم می خوره. لطفا تصحیح نمایید.
    منتظریم. چون خیلی خوب و کامل تر از همه جا بود. با سپاس.

    1. جواد نبوی گفت:

      سلام دوست عزیز
      خواهش می کنم لطف دارید.
      در مورد برگشت به حالت عادی، چون سایز های کوچک فقط در دستگاه های کوچک مثل تبلت و موبایل نمایش داده میشن، این مورد مشکلی به وجود نمیاره. اگر خیلی ضروری هست، اعلام کنید تا درست کنیم. گرچه به نظرم نیازی نیست
      با آرزوی موفقیت

  3. علی گفت:

    ممنون از پاسخ سریعتان ولی صفحه پیش نمایش را با موبایل باز کردم مشکل داره خودتان امتحان بفرمایید.

    1. جواد نبوی گفت:

      خواهش می کنم وظیفست،
      توی کد CSS که به فایل menu.css اضافه می کنید تغییراتی ایجاد کردم. کد جدید رو از همین مطلب بگیرید و جایگزین کد های قبلی فایل menu.css بکنید. این برای رفع مشکل بهم ریختگی منوی افقی بعد از برگشت به حالت عادیه. اما خودم صفحه پیش نمایش رو با موبایل باز کردم ولی مشکلی ندیدم. اگه همین مشکل منظورتون هست با کد جدید رفع میشه. اگه نیست، یک عکس از مشکل بفرستید تا بررسی کنم.
      موفق باشید

  4. محمد گفت:

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

    1. جواد نبوی گفت:

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

  5. اسماعیل گفت:

    با سلام و تشکر بابت اموزش خوب.
    محض اطلاع دوستان باید بگم کلا به فایلی که در بالا دانلود می کنید نیازی نیست.
    فقط باید فایل menu.css رو بسازید و کدهای قرار داده شده به همراه این ۲ کد:

    یکسری ویرایش هم خودتون باید انجام بدید تا ست بشه.

    با تشکر

    1. جواد نبوی گفت:

      تشکر فراوان از راهنمایی شما و آرزوی موفقیت

  6. اسماعیل گفت:

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

    1. جواد نبوی گفت:

      سلام دوست عزیز
      بنده با کروم تست کردم اما مشکلی ندیدم. شاید ورژن کروم شما قدیمی باشد. با بروزرسانی مشکل برطرف می شود.
      با آرزوی موفقیت

  7. zohreh گفت:

    سلام وقتتون بخیر
    من از کد شما استفاده کردم خیلی خوب بود ولی وقتی صفحه xs میشه و روی دکمه کلیک میکنم چیزی ظاهر نمیشه .
    خودمم که کد نوشتم همین مشکلو داشت
    به نظر شما مشکل از کجا میتونه باشه؟؟؟؟؟؟
    لطفا کمکم کنید

    1. جواد نبوی گفت:

      سلام وقت شما هم بخیر
      به نظرم کد های فراخوانی فایل جی کوئری رو در پایین صفحه (فوتر) قرار دهید.
      بهتره لینک نمونه رو بفرستید تا ببینیم مشکل از کجاست

  8. zohre گفت:

    مرسی از پاسخ سریعتون
    واقعا ممنونم

    file:///D:/file%20htmle,css/bootstrap-4.0.0-alpha.5-dist/index.html#imgcarousel

  9. zohreh گفت:

    salam omid varam link dorst bashe
    file:///D:/file%20htmle,css/bootstrap-4.0.0-alpha.5-dist/index.html
    mamnon as komaketon

    1. جواد نبوی گفت:

      سلام
      لینکی که قرار دادید از سیستم خودتون هست و برای ما قابل مشاهده نیست. لطفا در یک سرویس آپلودینگ، کل پروژه رو آپلود کنید و لینکش رو اینجا بفرستید.

  10. رسول گفت:

    خیلی قشنگ و جالب بود ممنون
    فقط من واسه وردپرس میخوام یه سوال دارم
    توی فایل header.php وقتی کدهای

    کد لینک ها در اینجا قرار میگیرد

    را قرار می دم به جای کد لینک ها در اینجا قرار میگیرد توی وردپرس باید تابعشو که اینه بزارم:

    ‘header-menu’, ‘container’ =>”, ‘menu_class’ =>’topmenu’ ) ); ?>

    میدونم فقط به جای header-menu باید آی دی منو را بزارم اما کلاس منو را کجا باید تعریف کنم که به هم نریزه ؟؟
    ممنون میشم پاسخ بدین

    1. جواد نبوی گفت:

      خواهش می کنم
      ببینید وردپرس توابع زیادی برای نمایش لینک های دسته ها داره. این کدی که شما قرار دادید مشخص نیست دقیقا کدوم تابع هست.
      شما بهتره به بخش توابع وردپرس در سایت وردپرس سر بزنید تا کدی که مد نظرتون هست رو پیدا کنید.

  11. پدارم گفت:

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

    کلا اگه زحمت نباشه ی کد css یا هرچی واسم بنویسید که رویدداد کلیک انجام شه بعد نمایش بده

    ممنون

  12. پدارم گفت:

    سلام.من بخوام زیر منو بازدن دکمه نمایش داده بشه ن رویداد movemous باید کجارو و چطور تغییر بدم؟

    1. جواد نبوی گفت:

      سلام دوست عزیز
      برای اینکار باید کد اضافه ای برای منو نوشت که نیاز به دونستن جی کوئری داره. چون به صورت پیشفرض در کدی که ما قرار دادیم از سی اس اس برای نمایش زیر منو استفاده شده.
      با آرزوی موفقیت

  13. torabi گفت:

    سلام
    ضمن عرض تشکر فراوان بابت این آموزش بسیار مفید و صحیح.البته تمام آموزش هاتون اینقد واضح و صحیح هستند.یه سوال دارم که اگه لطف کنید پاسخ بدید خیلی ممنون میشم.”چطوری این منو رو ۳ سطحی کنیم؟” یعنی خود زیر منو ها باز شامل زیر منو باشن
    با تشکر

    1. جواد نبوی گفت:

      سلام دوست من
      خواهش می کنم
      برای اضافه کردن زیر منو باید استایل زیر منوی سوم رو مشخص کنید. کافیه به گزینشگری با سه تکرار ul li استایل بدید. برای اینکه بهتر متوجه بشید، به استایل فعلی که برای زیر منوی دوم نوشته شده توجه کنید. تقریبا شبیه به همین هست. از inspect element هم میتونید استفاده کنید.
      با آرزوی موفقیت

  14. torabi گفت:

    مرسی از پاسختون… متاسفانه هر چقدر سعی کردم موفق نشدم 🙁

    1. جواد نبوی گفت:

      خواهش میکنم
      بهتره به یک طراح وب بدید تا براتون انجام بده

  15. مجله هذلولی گفت:

    سلام.
    اولین بار بود که امروز با سایت شما آشنا میشدم و دو تا مقاله ای که ازتون خوندم کارمو واقعا راه انداخت. میخام بگم عجب سایتی، عجب آموزشهایی، عجب تصاویری، عجب کدهایی، عجب پامادوری، عجب بادی بیلدینگی! همچین چیزی ندیده بودم توی وب فارسی.دست مریزاد.خدا قوت.

    1. جواد نبوی گفت:

      خواهش می کنم دوست عزیز. شما لطف دارید. خوشحالیم که مطالب ما برای شما و دیگر دوستان مفید واقع شده.
      با آرزوی موفقیت و سلامتی برای شما دوست محترم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *