رفتن به مطلب
mehdi.tayebi

توضیحاتی درباره Walker و نحوه نوشتن آنها

پست های پیشنهاد شده

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

حال سوالم از حرفه ای ها در این زمینه این هستش که واقعا Walker ها چه هستند و برای چه کاری بیشتر استفاده می شود و نحوه نوشتن دستورات و توابع این کدها به چه صورت هست ؟

با اجازه مدیران میخوام این بحث Walker ها را در این تاپیک اینقدر ادامه بیدم تا بتونیم یک مگامنو شیک برای وب سایتتون ایجاد کنیم . ;)

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

به اشتراک گذاری این ارسال


لینک به ارسال

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

لینک مربوط به این مگامنو :

http://jsfiddle.net/apougher/ydcMQ/

 

کدهای مربوط به HTML :

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Product Listing <b class="caret"></b> </a>
          <ul class="dropdown-menu megamenu row">
            <li>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
              <div class="col-sm-6 col-md-3">
                <a href="#" class="thumbnail">
                  <img src="http://placehold.it/150x120" />
                </a>
              </div>
            </li>
          </ul>
        </li>

        <li class="dropdown menu-large">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a>
          <ul class="dropdown-menu megamenu row">
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Glyphicons</li>
                <li><a href="#">Available glyphs</a></li>
                <li class="disabled"><a href="#">How to use</a></li>
                <li><a href="#">Examples</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Dropdowns</li>
                <li><a href="#">Example</a></li>
                <li><a href="#">Aligninment options</a></li>
                <li><a href="#">Headers</a></li>
                <li><a href="#">Disabled menu items</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Button groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Button toolbar</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Nesting</a></li>
                <li><a href="#">Vertical variation</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Button dropdowns</li>
                <li><a href="#">Single button dropdowns</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Input groups</li>
                <li><a href="#">Basic example</a></li>
                <li><a href="#">Sizing</a></li>
                <li><a href="#">Checkboxes and radio addons</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Navs</li>
                <li><a href="#">Tabs</a></li>
                <li><a href="#">Pills</a></li>
                <li><a href="#">Justified</a></li>
              </ul>
            </li>
            <li class="col-sm-3">
              <ul>
                <li class="dropdown-header">Navbar</li>
                <li><a href="#">Default navbar</a></li>
                <li><a href="#">Buttons</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Non-nav links</a></li>
                <li><a href="#">Component alignment</a></li>
                <li><a href="#">Fixed to top</a></li>
                <li><a href="#">Fixed to bottom</a></li>
                <li><a href="#">Static top</a></li>
                <li><a href="#">Inverted navbar</a></li>
              </ul>
            </li>
          </ul>

        </li>
      </ul>
    </div>
  </div>
</div>

 

کدهای مربوط به CSS :

.navbar-default {
  color: #fff;
  background-color: #ccc6c6;
  border-color: #aca1a2;
}

.navbar-default .navbar-nav > li > a {
  color: #fff;
}

.navbar-default .navbar-nav > .dropdown > a .caret {
  border-top-color: #fff;
  border-bottom-color: #fff;
}

.navbar-default .navbar-brand {
  color: #fff;
}

.menu-large {
  position: static !important;
}

.megamenu {
  padding: 20px 0px;
  width: 100%;
}

.megamenu> li > ul {
  padding: 0;
  margin: 0;
}

.megamenu> li > ul > li {
  list-style: none;
}

.megamenu> li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}

.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}

.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  color: #999999;
}

.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
  cursor: not-allowed;
}

.megamenu.dropdown-header {
  color: #428bca;
  font-size: 18px;
}

@media (max-width: 768px) {
  .megamenu {
    margin-left: 0;
    margin-right: 0;
  }
  .megamenu> li {
    margin-bottom: 30px;
  }
  .megamenu> li:last-child {
    margin-bottom: 0;
  }
  .megamenu.dropdown-header {
    padding: 3px 15px !important;
  }
  .navbar-nav .open .dropdown-menu .dropdown-header {
    color: #fff;
  }
}

و کدهای مربوط به JS :

// Dropdown Menu Fade    
jQuery(document).ready(function() {
  $(".dropdown").hover(
    function() {
      $('.dropdown-menu', this).stop().fadeIn("fast");
    },
    function() {
      $('.dropdown-menu', this).stop().fadeOut("fast");
    });
});

از بوت استرپ نسخه 3.2 استفاده شده .

 

 

به اشتراک گذاری این ارسال


لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


  • مطالب مشابه

    • توسط DariushGreat
      سلام
      من می‌خوام یه مگامنو داشته باشم به شکل زیر:

      یعنی هنگام رفتن روی "گزینه 1" در جایگاه یکم که همون فهرست اصلی هست، جایگاه دوم باز بشه. سپس با رفتن روی هر یک از گزینه‌ها (در اینجا برای نمونه نوشتم "زیرگزینه 1")، ستون‌های مربوط به اون باز بشن. اگر بخوام چکیده‌شو بگم، فهرست مگامنوی سایت دیجی‌کالا هست.
      من با HTML و CSS3 و jQuery کد رو ساختم. ولی بحث اینجاست که گزینه‌ها برای فهرست زیادن و از سوی دیگه هی مدام در حال دگرگونی هستن
      نیاز به واکر برای فهرست دارم که با فعال کردنش بتونم با خود بخش مدیریت فهرست‌های وردپرس کار کنم.
       
      از کمکتون ممنونم
×
×
  • اضافه کردن...