My bootstrap dropdown menu changes position after I select an item and redirect to another page. The first image shows the dropdown in proper position prior to selecting dropdown item. And the second shows the position of the dropdown after I've selected a dropdown item and redirected to another page. I select the second menu item and the dropdown appears underneath the first menu item. (I guess I need a 10 reputation rating to post images, so you'll just have to imagine it. Sorry.)
My code is below
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-static-top">
<ul class="nav">
<li id="liHome" class="active" runat="server">
<a id="aHome" href="/home.aspx" runat="server">HOME</a>
</li>
<li id="liFindxxx" class="dropdown" runat="server">
<a id="aFindxxx" href="/xxxbrowse.aspx" class="dropdown-toggle" data-toggle="dropdown" runat="server">FIND SOMETHING</a>
<ul class="dropdown-menu">
<li id="liBrowsexxx" class="dropdown" runat="server">
<a id="addBrowsexxx" href="/xxxbrowse.aspx" runat="server">Browse</a>
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li>
Action 4
</li>
<li class="divider"></li>
<li class="nav-header">Header</li>
<li>
A Link
</li>
<li>
Another Link
</li>
</ul>
</li>...
When i add a active class to li with id liFindxxx like class="dropdown active", or to a li from the submenu i don't find a problem.
When you remove the dropdown class from li with id liFindxxx you will get the results you describe. So make sure to add active to class tag and not overwrite it.
Related
When I clicked on sub menu item my menu get closed, if I clinked on sub menu items. Please let me know how can I avoid this.
Actually "open" class get remove on clicking sub item.
<ul class='wraplist' style="height: auto">
<li class="">
<a href="javascript:;">
<i class="fa fa-home"></i>
<span class="title">{{app.translateByLocale('menu_home')}}/span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li submenu ng-show="app.checkOffSectionConfig('app_home')">
{{app.translateByLocale('menu_home_dashboard')}}
</li>
<li submenu ng-show="app.checkOffSectionConfig('app_statistic')">
{{app.translateByLocale('menu_home_statistics')}}
</li>
</ul>
</li>
</ul>
You can use e.preventDefault() to overwrite the default behavior by binding it with the click event on the sub menu item.
All day I'm struggling to create a custom menu walker which will fit the markup that must be on the frontend.
Here is the desired markup:
<nav class="menu cf">
<div class="menu__inner cf">
<ul class="menu__list">
<li class="menu__item menu__item--first">
Menu item 1
</li>
<li class="menu__item menu__item--has_children cf">
<a href="" class="menu__link">
Menu item 2
</a>
<a href="" class="menu__link--toggle">
<i class="icon-arrow-thin-down"></i>
</a>
<div class="sub_menu__wrap">
<div class="container">
<div class="gr-12 gr-3#lg">
<div class="sub_menu__heading">Menu heading (parent menu title)</div>
</div>
<div class="gr-12 gr-9#lg">
<ul class="sub_menu">
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 1
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 2
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 3
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 4
</li>
<li class="sub_menu__item gr-12 gr-4#lg">
Submenu item 5
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menu__item menu__item--last">
Menu item 3
</li>
</ul>
</div>
I have some examples of custom class that extends Walker_Nav_Menu
but I think those examples are no good.
Here is what I have so far: http://pastebin.com/qnPx9J67
IMPORTANT! I want to have BEM methodology on my classes, as like:
$menuListClass = 'menu__list';
$menuItemClass = 'menu__item';
$menuLinkClass = 'menu__link';
$subMenuClass = 'sub_menu';
$subMenuClass = 'sub_menu';
$submenuItemClass = 'sub_menu__item';
$subMenuLinkClass = 'sub_menu__link';
I also want to keep some default Wordpress classes, but in this format:
Examples:
.menu-item-has-children -> .menu__item--has_children
.current-menu__item -> .menu__item--current
I'm hoping someone could help me out with this since I don't know very good PHP. :)
Source link: https://developer.wordpress.org/reference/classes/walker_nav_menu/
I have created a dropdown menu.I want the dropdown lists to display as inline-block or inline table but I can't figure out the right way foundation does it. Any help will be appreciated.
<div class="row column text-center">
<ul class="dropdown menu custom-menu" data-dropdown-menu>
<li>
For Sale()
<ul class="menu">
<!--I want the lists below to display horizontal as opposed to vertical-->
<li>Animals()</li>
<li>Computer-Software()</li>
<li>Computer-Hardware()</li>
<li>Cellphone-accessories()</li>
<li>For Babies-Infants()</li>
<li>Used Cars()</li>
</ul>
</li>
<li>Vehicles
<ul class="menu">
<li>Used Cars</li>
</ul>
</li>
<li>Classes</li>
<li>Real Estate</li>
<li>Sevices</li>
<li>Community</li>
<li>Personals</li>
<li>Jobs</li>
Hi I have an nav like this:
<nav class="navbar navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li >
Strona Główna
</li>
<li class="active" >
Legendopedia
</li>
<li >Zwoje z Sieci</li>
<li >
Zaloguj się
</li>
<li>
Zarejestruj się
</li>
</ul>
</div>
</nav>
And I want to check with CAPYBARA if the 'li' that containts '/legendopedia' link has css class: active.
If there can be only one active li in the .container div you can do it like
expect(page.find('div.container li.active')).to have_selector(:link, '', href: '/legendopedia')
which is a little backward from what you mentioned since it's checking that the li with class active has the link with the relevant href in it, but is effectively the same.
Another way would be to use xpath
expect(page).to have_xpath("//li[.//a[#href='/legendopedia']][#class='active']")
when my primary menu is like item menu1/submenu1.2, de li gets the class active, so i can style it, for example in a different color.
however, if i go to page menu1/submenu1.2/153 then the active class is missing.
Or anything like menu1/submenu1.2/* is the active class missing.
How can I solve this?
In your example of menu1/submenu1.2/153 the active class should have moved to 153. You can still style submenu1.2 differently by looking for the active-trail class on the <li>
For example, if you go to admin/content/comment the menu's html should look similar like this:
<ul class="menu">
<li class="expanded active-trail">
Administer
<ul class="menu">
<li class="expanded first active-trail">
<a title="Manage your site's content." href="/drupalsite/?q=admin/content">Content management</a>
<ul class="menu">
<li class="leaf first active-trail">
<a class="active" title="List and edit site comments and the comment moderation queue." href="/drupalsite/?q=admin/content/comment">Comments</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
That means you can style the admin and content links by using CSS something like the following:
li.active-trail a {
/*Whatever style here*/
}