I'm trying to highlight navbar items that are active as shown below on Medium.com. I have added the zimme:iron-router-active package but I still am not reaching my desired effect. What's the easiest way to accomplish the bold highlighting and the bar on the bottom when the item is pressed?
This is what I have so far:
<div class="navSecondary">
<div class="menu" align="center">
<ul class="menu-items">
<li class="{{ isActiveRoute home }}"> HOME </li>
</ul>
</div>
</div>
Is there a better way to do this?
<nav>
<ul>
<li class="{{isActiveRoute regex='home'}}"> HOME </li>
</ul>
</nav>
Related
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>
I'm using the Foundation 5-Framework. I want to create a navigation with a panel under it. When im adding the panel, the navigationbar is always on top the panel.
This is my Code:
<div id="content">
<div class="row">
<div class="contain-to grid fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>MySite</h1>
</li>
<li class="toggle-topbar menu-icon">
<span></span>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="active">
Index
</li>
<li>
Contact
</li>
<li>
About me
</li>
<li class="has-dropdown">
Sign up
<ul class="dropdown">
<li>
Log in
</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
<div class="row">
<div class="small-12 columns panel">
<p>This is a panel.</p>
</div>
</div>
</div>
</div>
You can either remove the class "fixed" from your third row (if you don't need a fixed positioned top bar),
or add margin-top to the second (panel) row (with the same height as the top-bar) if you wish to keep the top-bar fixed.
When an element is position fixed (like absolute and float) it is not actually on the page in the sense that static elements are not relative to it. so your panel was anchoring to the top of the page, because there was no block above it.
I am simplifying it a bit, but I hope that helps.
I've tried a few tricks to try and move the menu on the left, but none of the regular classes appears to be fit to toggle this option, especially on mobile devices (which is what I'm designing for).
Is there a mobile device CSS fix for this? (note I've already got "class='left'" on the menu area).
<nav class="top-bar" data-topbar role="navigation" data-options="is_hover: false">
<ul class="title-area">
<li class="toggle-topbar menu-icon"><span></span></li>
<li class="name">
<h1><img style="width: 150px;"src="yourmomslogo.png"></h1>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active">Login</li>
<li>Your Cats</li>
</ul>
</section>
</nav>
Let see the doc
If you change left by right in this code
<ul class="left">
<li>Left Nav Button</li>
</ul>
You can see the link goes to the right, so the left class changes the position of the link (so the menu for you)
I'm trying show the description of parent menu in submenu.
I have something like that
<nav>
<ul nav-menu>
<li><a>item 1</a></li>
<li><a>item 2</a>
<div class="dropdown">
<span> $DESCRITPION_OF_ITEM_2</span>
<ul sub-menu>
<li>..</li>
<li>..</li>
<ul>
</div>
</ul>
</nav>
I need showing this variable "$DESCRITPION_OF_ITEM_2" which showing the description from menu editor in wordpress, is it possible ?
And second question, do you know good plugins or something for adding image to menu ?
Thank;s for response
I think this might be what you are looking for.
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.