I have a horizontal menu with another horizontal submenu. The problem I have is with styling. I am trying to make it so that when a mainmenu element is activated and the corresponding submenu is shown then the mainmenu elements coloring kind of bleeds to cover the white-space between the two menus as in the following image:
Just to clarify the picture above is a rough image manipulated approximation on what I am searching for.
I am doing this in CMS Made Simple so this is only an approximation of the code:
<nav id="mainmenu">
<ul>
<li>Main Menu 1</li>
</ul>
</nav>
<nav id="submenu">
<ul>
<li>Submenu 1</li>
</ul>
</nav>
Since you have provided no code I have created with a vague idea :
http://jsfiddle.net/FLnke/
<nav id="mainmenu">
<ul>
<li onmouseover="javascript:opensub()" onmouseout="javascript:closesub()" >Main Menu 1 |
<div id="submenu"></br>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</div>
</li>
<li>Main Menu 2</li>
</ul>
Related
Ok here goes. the off Canvas does display the menu however i need it to function as a dropdown for the categories selected. What it does instead is just adds them to the menu just like a regular item.
i have tried using the zurb code and still get the same results
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<!-- Close button -->
<button type="button" class="button large hollow float-right" data-close="offCanvas"><i class="fi-x large"></i></button>
<ul class="vertical menu">
<li>
Item 1
<ul class="vertical menu dropdown">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
</ul>
</li>
<li>Item 1B</li>
</ul>
</div>
so instead of being able to click on item1 to open the dropdown all the other items (a to e) are already opened and stay that way. This all used to work in foundation 5
So am i missing something ?
I'm trying to style a topbar menu with submenu items in Foundation. The code seems right, but the submenu items keep breaking the styling of the topbar on a page refresh, then going into place (hidden under the top menu item) when the javascript loads.
The docs address FOUC on the dropdown arrows, but not on the list items themselves.
Code:
<div class="top-bar">
<ul class="dropdown menu" data-dropdown-menu>
<li class="is-dropdown-submenu-parent">
Item 1
<ul class="menu">
<li>Item 1A</li>
<li>Item 1B</li>
<li>Item 1C</li>
<li>Item 1D</li>
<li>Item 1E</li>
<li>Item 1F</li>
<li>Item 1G</li>
<!-- ... -->
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Codepen: https://codepen.io/anon/pen/gRowMw
This flashing also happens on the official codepen: https://codepen.io/IamManchanda/pen/XRYWPO
I may possible have a requirement where i have to link the parent menu to a link rather than showing sub menu. Right now i am using Slick Menu http://slicknav.com/
Logically parent menu should not be linked as it should show child menu on mobile device. while desktop version we can counter this with hover effect can show sub-menus and click on the parent menu can open link also but on small screen we can either open link or show submenu.
my question right now is that in fiddle example (http://jsfiddle.net/y1dLdd1f/1/) i am linking Parent 1 meny to google.com, but script is blocking this. How can i unblock it and when user click on it it opens the page rather than showing the sub menu if parent menu has a proper link
<ul id="menu">
<li>Parent 1
<ul>
<li>item 3</li>
<li>Parent 3
<ul>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
</li>
<li>item 4</li>
</ul>
</li>
<li>item 1</li>
<li>non-link item</li>
<li>Parent 2
<ul>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>
</li>
</ul>
Slick menu has a number of available options including "allowParentLinks", all you need should be,...
$(document).ready(function(){
$('#menu').slicknav({
allowParentLinks:"true"
});
});
But to show this working in JSFiddle you would need to add target="_blank" to you <a> tag.
I am currently coding a bootstrap website, I am about to finish. but I have one part that I can't accomplish, and its the Side bar,
I have made a bootstrap 3 spy + affix side bar for example:
http://s.bootply.com/render/RpfBuecywd
Imagine that the Side scrollspy menu has another menu after it, that will move when you scroll with you.
I am trying to do something like this:
I am always failing to do that since everytime I create the 2nd menu the menu itself doesn't scroll and the page gets broken..
if any of you guys can help me do that, I will love you for ever. I am trying to do it for the past 30 minutes and I cant think of a way to do it.
Thanks,
Aviv.
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="sidebar-nav-fixed affix">
<div class="well">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div><!--/.well -->
<div class="well">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div><!--/.well -->
</div><!--/sidebar-nav-fixed -->
</div>
</div>
</div>
Here's a similar example: Right and Left Sidebars Fixed
Always include a fiddle of you code when asking questions.
I have found a fix for it, simply opening up a ul inside a ul
example:
<ul class="nav affix">
<li>Something</li>
<li>Something</lI>
<ul class="nav affix-top">
<li>Something 2</li>
<li>Something 2</li>
</ul>
</ul>
I want to do a dropdown menu vertical with a twitter bootstrap. My dropdown links are a same class CSS. But when I choose one if them, the two dropdown links slide.
Thanks for your help.
<ul class="nav nav-list">
<li class="nav-header">Ac</li>
<li class="nav-header main">Pla
<ul>
<li class="nav-subheader">Qua</li>
<li class="nav-subheader">Qua1</li>
<li class="nav-subheader">Qua2</li>
</ul></li>
<li class="nav-header main">Proj
<ul>
<li class="nav-subheader">Sou</li>
<li class="nav-subheader">Sou1</li>
<li class="nav-subheader">Sou2</li>
<li class="nav-subheader">Sou3</li>
</ul></li>
<li class="nav-header">Cen</li>
<li class="nav-header">Mes</li>
</ul>
You're missing a few key classes and information.
See the jFiddle I've created:
http://jsfiddle.net/KhCrm/
Make sure you have included the relevant JS/CSS (The only 2 needed to make this work really are dropdown.js, and the bootstrap.css.