استایل های منو
تغییر موقعیت ناوبری
تغییر موقعیت ناوبری افزودن کلاس در .header-nav کلاس را به سمت چپ اضافه کنید.justify-content-start ، کلاس را به سمت راست اضافه کنید.justify-content-end ناوبری وسط افزودن کلاس.justify-content-center
<div class="header-nav w3menu navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li> <a href="javascript:void(0);"><span>ناو لینک 1</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو لینک 2</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو لینک 3</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو لینک 4</span></a> </li> </ul> </div>
برچسب منوی فرعی ناو
تغییر موقعیت منوی فرعی اضافه کردن کلاس در .sub-menu-down کلاس را به سمت چپ اضافه کنید.menu-left ، کلاس را به سمت راست اضافه کنید.menu-right مرکز ناو افزودن کلاس.menu-center
<div class="header-nav w3menu navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li class="sub-menu-down active menu-right"> <a href="javascript:void(0);"><span>ناو 1</span></a> <ul class="sub-menu"> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li class="sub-menu-down active"><a href="javascript:void(0);">ناو لینک 2</a> <ul class="sub-menu"> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li class="sub-menu-down active"><a href="javascript:void(0);">ناو لینک 2</a> <ul class="sub-menu"> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);"><span>ناو 2</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو 3</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو 4</span></a> </li> </ul> </div>
مگا منوی کامل و گسترده
تغییر اندازه منو اضافه کردن کلاس در.has-mega-menu با عرض گسترده منو کلاس اضافه کنید.wide-width ، منو با عرض کامل اضافه کردن کلاس.full-width
<div class="header-nav w3menu navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li class="has-mega-menu full-width active"> <a href="javascript:void(0);"><span>ناو 1</span></a> <div class="mega-menu"> <ul> <li> <a href="javascript:void(0);" class="menu-title">هدر 1 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">هدر 2 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">هدر 3 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">هدر 5 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">هدر 5 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> </ul> </div> </li> <li> <a href="javascript:void(0);"><span>ناو 2</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو 3</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو 4</span></a> </li> </ul> </div>
مگا منو عرض خودکار
تغییر اندازه خودکار مگا منو اضافه کردن کلاس در.has-mega-menu اضافه کردن کلاس عرض خودکار منو مگا.auto-width
<div class="header-nav w3menu navbar-collapse collapse justify-content-start" id="navbarNavDropdown"> <ul class="nav navbar-nav"> <li class="has-mega-menu auto-width active"> <a href="javascript:void(0);"><span>ناو 1</span></a> <div class="mega-menu"> <ul> <li> <a href="javascript:void(0);" class="menu-title">هدر 1 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">هدر 2 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">هدر 3 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">هدر 5 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> <li> <a href="javascript:void(0);" class="menu-title">هدر 5 </a> <ul> <li><a href="javascript:void(0);">ناو لینک 1</a></li> <li><a href="javascript:void(0);">ناو لینک 2</a></li> <li><a href="javascript:void(0);">ناو لینک 3</a></li> <li><a href="javascript:void(0);">ناو لینک 4</a></li> <li><a href="javascript:void(0);">ناو لینک 5</a></li> </ul> </li> </ul> </div> </li> <li> <a href="javascript:void(0);"><span>ناو 2</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو 3</span></a> </li> <li> <a href="javascript:void(0);"><span>ناو 4</span></a> </li> </ul> </div>