تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 8 از 8

مقاله: آموزش ساخت منوی آبشاری با jQuery

    1. آموزش ساخت منوی آبشاری با jQuery »

      آموزش ساخت منوی آبشاری با jQuery

      نگارش: , by (We could belong together)
      2013/01/14 07:30 PM
      امتیاز: 

      منوي آبشاري از کاربردي ترين ابزاري است که امروزه در وب سايت ها مورد استفاده قرار مي گيرد. منوي آبشاري يک الگوي نمايش لينک است اما در قالبي مشخص و تعريف شده و همانطور که از نامش مشخص است به صورت آبشاري باز و فعال مي گردد. اين دسته از منوها در عين سادگي بسيار پرکاربرد هستند. با وجود منوهاي آبشاري شما مي توانيد دهها لينک را در فضاي کوچکي گنجانده و هر مورد از لينک ها را در صورت لزوم انتخاب و فعال نماييد. وسعت کاربرد منوهاي آبشاري گسترده بوده و طراح وب سايت بنا به سليقه و نياز خود مي تواند از آن استفاده کند.
      براي ساخت منوي آبشاري راهها و روش هاي زيادي وجود دارد که هر کدام مزيت ها و معايب خود را دارند اما در بين همه اين روش ها استفاده از کتابخانه پرقدرت و معروف جاوا اسکريپت يعني jQuery به دليل سازگاري با تمام مرورگر هاي اينترنتي و قدرت مانور بالاي آن از ديگر روش هاي موجود کاربردي تر مي باشد.


      مشاهده نمونه :
      Edit this Fiddle - jsFiddle



      براي افزودن jQuery به صفحه کد زير را در قسمت head قرار دهيد


      کد:
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
         <script type="text/javascript">
      $(document).ready(function () {
       
          $('#nav li').hover(
              function () {
                  //show its submenu
                  $('ul', this).slideDown(100);
       
              },
              function () {
                  //hide its submenu
                  $('ul', this).slideUp(100);
              }
          );
       
      });
      </script>
      البته مي توانيد در قسمت src مکان فايل jquery مورد نظر خود را وارد نماييد.
      حال بايد عناصر مربوط به منو را در قسمت body قرار دهيد.


      کد:
      <ul id="nav">
          <li><a href="#">Parent 01</a></li>
          <li><a href="#" class="selected">Parent 02</a>
              <ul>
                  <li><a href="#">Item 01</a></li>
                  <li><a href="#" class="selected">Item 02</a></li>
                  <li><a href="#">Item 03</a></li>
              </ul>
              <div class="clear"></div>
          </li>
          <li><a href="#">Parent 03</a>
          <ul>
              <li><a href="#">Item 04</a></li>
              <li><a href="#">Item 05</a></li>
              <li><a href="#">Item 06</a></li>
              <li><a href="#">Item 07</a></li>
          </ul>
              <div class="clear"></div>
          </li>
          <li><a href="#">Parent 04</a></li>
      </ul>
       
      <div class="clear"></div>
      سی اس اس ها رو نیز به قالبتون اضافه کنید :

      کد:
      body {font-family:arial; font-size:11px;}
      .clear {clear:both}
      /* remove the list style */
      #nav {
          margin:0;
          padding:0;
          list-style:none;
      } 
       
          /* make the LI display inline */
          /* it's position relative so that position absolute */
          /* can be used in submenu */
          #nav li {
              float:right;
              display:block;
              width:100px;
              background:#ccc;
              position:relative;
              z-index:500;
              margin:0 1px;
          }
       
          /* this is the parent menu */
          #nav li a {
              display:block;
              padding:8px 5px 0 5px;
              font-weight:700;
              height:23px;
              text-decoration:none;
              color:#fff;
              text-align:center;
              color:#333;
          }
       
          #nav li a:hover {
              color:#fff;
          }
       
              /* submenu, it's hidden by default */
              #nav ul {
                  position:absolute;
                  left:0;
                  display:none;
                  margin:0 0 0 -1px;
                  padding:0;
                  list-style:none;
              }
       
              #nav ul li {
                  width:100px;
                  float:left;
                  border-top:1px solid #fff;
              }
       
              /* display block will make the link fill the whole area of LI */
              #nav ul a {
                  display:block;
                  height:15px;
                  padding: 8px 5px;
                  color:#666;
              }
       
              #nav ul a:hover {
                  text-decoration:underline;
              }
       
      /* fix ie6 small issue */
      /* we should always avoid using hack like this */
      /* should put it into separate file : ) */
      *html #nav ul {
          margin:0 0 0 -2px;
      }
      نمونه : Edit this Fiddle - jsFiddle

      موفق باشید !
  1. Top | #2
    کاربر سایت

    ورژن ویبولتین
    4.2.2
    نوشته ها
    193
    میزان امتیاز
    26

    پیش فرض

    هاااان چیموگه !!!!!
    باتشکر اما
    میشه یکی توضیح بیشتری در رابطه با این منوهای آبشاری بدهد؟
    از اول و اینکه کدهارو در کجا باید دقیقا قرار بدهم تا درست کار کنه؟

  2. Top | #3
    مدیر ارشد

    ورژن ویبولتین
    All Versions
    نوشته ها
    3,176
    میزان امتیاز
    447

    پیش فرض

    توضیحات کامل هست!

    جست جو کنید : headinclude_bottom این رو بزارید پایین اون کدها:
    کد:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>    <script type="text/javascript"> $(document).ready(function () {       $('#nav li').hover(         function () {             //show its submenu             $('ul', this).slideDown(100);           },         function () {             //hide its submenu             $('ul', this).slideUp(100);         }     );   }); </script>
    این کد رو جایی که میخواید نمایش داده بشه بزنید مثلا داخل header :
    کد:
    <ul id="nav">     <li><a href="#">Parent 01</a></li>     <li><a href="#" class="selected">Parent 02</a>         <ul>             <li><a href="#">Item 01</a></li>             <li><a href="#" class="selected">Item 02</a></li>             <li><a href="#">Item 03</a></li>         </ul>         <div class="clear"></div>     </li>     <li><a href="#">Parent 03</a>     <ul>         <li><a href="#">Item 04</a></li>         <li><a href="#">Item 05</a></li>         <li><a href="#">Item 06</a></li>         <li><a href="#">Item 07</a></li>     </ul>         <div class="clear"></div>     </li>     <li><a href="#">Parent 04</a></li> </ul>   <div class="clear"></div>

    css ها هم که جست جو کنید: additional.css و این کدها رو بزنید ته اون کدها:

    کد:
    body {font-family:arial; font-size:11px;} .clear {clear:both} /* remove the list style */ #nav {     margin:0;     padding:0;     list-style:none; }        /* make the LI display inline */     /* it's position relative so that position absolute */     /* can be used in submenu */     #nav li {         float:right;         display:block;         width:100px;         background:#ccc;         position:relative;         z-index:500;         margin:0 1px;     }       /* this is the parent menu */     #nav li a {         display:block;         padding:8px 5px 0 5px;         font-weight:700;         height:23px;         text-decoration:none;         color:#fff;         text-align:center;         color:#333;     }       #nav li a:hover {         color:#fff;     }           /* submenu, it's hidden by default */         #nav ul {             position:absolute;             left:0;             display:none;             margin:0 0 0 -1px;             padding:0;             list-style:none;         }           #nav ul li {             width:100px;             float:left;             border-top:1px solid #fff;         }           /* display block will make the link fill the whole area of LI */         #nav ul a {             display:block;             height:15px;             padding: 8px 5px;             color:#666;         }           #nav ul a:hover {             text-decoration:underline;         }   /* fix ie6 small issue */ /* we should always avoid using hack like this */ /* should put it into separate file : ) */ *html #nav ul {     margin:0 0 0 -2px; }

    کاربر مقابل از Leberman بابت این پست مفید تشکر کرده است:


  3. Top | #4
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    62
    میزان امتیاز
    12

    پیش فرض

    سلام

    میتونید کد هایی مشابه سایت مجدی آنلاین رو قرار بدید ، مثل همون باشه که وقتی اسکرول پایین میاد منو ثابت بشه و وقتی اسکرول بالا هست منو زیر ناو قرار بگیره

    با تشکر

  4. Top | #5
    کاربر سایت

    ورژن ویبولتین
    5
    نوشته ها
    5,334
    میزان امتیاز
    645

    پیش فرض

    نقل قول نوشته اصلی توسط wordpress نمایش پست ها
    سلام

    میتونید کد هایی مشابه سایت مجدی آنلاین رو قرار بدید ، مثل همون باشه که وقتی اسکرول پایین میاد منو ثابت بشه و وقتی اسکرول بالا هست منو زیر ناو قرار بگیره

    با تشکر
    فعلا آموزشی برای ویبولتین ندیدم .
    منتظر باشید دوستان طراح پاسخ بدند .
    @Leberman @Mr.Ramin @MR.Khatam

    2 تشکر توسط:


  5. Top | #6

  6. Top | #7
    کاربر سایت

    ورژن ویبولتین
    4.2
    نوشته ها
    62
    میزان امتیاز
    12

    پیش فرض

    زیادم مهم نیست که برای ویبولتین باشه ، فقط css و jquery باشه کافیه ، ممنون
    قالب ویبولتین هم یه جوریه که به راحتی نمیشه ریپ کردش و حوصله خجسته ای میخواد

  7. Top | #8

    پیش فرض

    نقل قول نوشته اصلی توسط wordpress نمایش پست ها
    زیادم مهم نیست که برای ویبولتین باشه ، فقط css و jquery باشه کافیه ، ممنون
    قالب ویبولتین هم یه جوریه که به راحتی نمیشه ریپ کردش و حوصله خجسته ای میخواد
    برای همه سیستمی میشه استفاده کرد ، فقط قرار دادن کد ها در قالب متفاوت خواهد بود

    آموزش تا دقایقی دیگر ....

    3 تشکر توسط:


اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کسانی که این مقاله را دیده اند از این مقاله ها نیز بازدید کرده اند

  1. پاسخ: 13
    آخرين نوشته: 2014/06/17, 10:58 AM
  2. » آموزش ایجاد تبلیغات در گوشه سایت با CSS و jQuery
    توسط رضوان در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 5
    آخرين نوشته: 2014/05/11, 08:00 AM
  3. [آموزش] دکمه بازگشت به بالا jQuery
    توسط Mohsen Neo در انجمن آموزش های وی بولتین
    پاسخ: 9
    آخرين نوشته: 2013/02/03, 04:09 PM
  4. آموزش قرار دادن پیغام کریسمس با jquery
    توسط Danialskh در انجمن آموزش های وی بولتین
    پاسخ: 0
    آخرين نوشته: 2012/10/20, 09:20 PM
  5. پاسخ: 3
    آخرين نوشته: 2012/02/07, 01:33 PM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •