mehdi.tayebi

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

2 پست در این موضوع قرار دارد

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

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

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

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

0

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


لینک به پست

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

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

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 استفاده شده .

 

 

0

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

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

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