mehdi.tayebi 171 ارسال شده در فروردین 95 گزارش بازنشر ارسال شده در فروردین 95 سلام به همگی دوستان . قالبهای متعددی از سایت تم فارست حتما مشاهده کردید که دارای مگامنو های پیشرفته ای هستند . بعد از بررسی کدهاشون به این نتیجه رسیدم که با استفاده از Walker نوشته شده است . حال سوالم از حرفه ای ها در این زمینه این هستش که واقعا Walker ها چه هستند و برای چه کاری بیشتر استفاده می شود و نحوه نوشتن دستورات و توابع این کدها به چه صورت هست ؟ با اجازه مدیران میخوام این بحث Walker ها را در این تاپیک اینقدر ادامه بیدم تا بتونیم یک مگامنو شیک برای وب سایتتون ایجاد کنیم . اینکه باید به بخش Codex مراجعه کنم کامل می دونم . ولی در کل به زبان شیرین فارسی می خواستم در این باره بحث کنیم و به نتیجه مطلوب برسیم . با تشکر . نقل قول لینک به ارسال
mehdi.tayebi 171 ارسال شده در فروردین 95 مالک گزارش بازنشر ارسال شده در فروردین 95 برای شروع کار گفتم یه مگامنو خیلی ساده از ترکیب بوت استرپ براتون قرار بدم که بتونید راحت تر مثالهامون را توضیح بدیم . لینک مربوط به این مگامنو : 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 استفاده شده . نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .