رفتن به مطلب

توضیحاتی درباره 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 قرار دهید.

×
×
  • اضافه کردن...