I've got a simple drop down menu like this:
<nav>
<ul class="nav">
<li class="topmenu"> Grp 1
<ul id="firstul">
<li class="submenu">Example 1</li>
<li class="submenu">Example 2</li>
</ul>
</li>
<li class="topmenu"> Grp 2
<ul id="secondul">
<li class="submenu">Example 1</li>
<li class="submenu">Example 2</li>
</ul>
</li>
</ul>
</nav>
Now it happens, that sometimes, if I click f.e. on the first li in the firstul "Example 1" (which should lead to https://www.example/grp1/exmpl1.php) it loads the "Example 1" of the seconduland I dont find the mistake why. It appears completly random. Sometimes on the first click, sometimes after a few. Can somebody give me a hint why this happens?
Related
Can you please help me with this plunker:
https://plnkr.co/edit/ZDVUBAxMEFnoGV6GfL88?p=info
Not sure why plunker preview view not showing things. Please open a new
window by clicking right top button in preview view, which should show
something.
<div id="wrapper">
<div id="header" class="sticky shadow-after-3 clearfix">
<header id="topNav">
<div class="container">
<div class="navbar-collapse pull-left nav-main-collapse collapse submenu-dark">
<nav class="nav-main">
<ul id="topMain" class="nav nav-pills nav-main">
<li class="dropdown mega-menu">
<!-- PORTFOLIO -->
<a class="dropdown-toggle" href="#">
PORTFOLIO
</a>
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-5th">
<ul class="list-unstyled">
<li>
<span>GRID</span>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#">1 COLUMN</a>
<ul class="dropdown-menu">
<li>SUB COLUMN 0</li>
<li>SUB COLUMN 1</li>
<li>SUB COLUMN 2</li>
<li>SUB COLUMN 3</li>
<li>SUB COLUMN 4</li>
</ul>
</li>
<li>
2 COLUMNS
</li>
<li>
3 COLUMNS
</li>
<li>
4 COLUMNS
</li>
<li>
5 COLUMNS
</li>
<li>
6 COLUMNS
</li>
</ul>
</div>
Mouse hover at GRID > 1 COLUMN, the sub column will pop up below. But this is not as expected. I expect the sub column to appear at right side of '1 COLUMN'. Please see the attached mock up for the expected behaviour. Not sure how to achieve that, please help, thanks!
I'm working on a menu system that has a horizontal menu bar with pop-out menus when hovering over each of the options. What I would like to see happen is that when you hover over a menu option, there is no wrapping of top-level sub options. If I define a static width for this content it works, nothing wraps, but this looks poorly designed for the menus with less content as there's unnecessary white space. If I add a white-space nowrap the content no longer wraps but the "container" UL doesn't automatically size to the correct size of the content that is contained within it when inline-block formatted (this is the iteration that is linked below). I would like to go with a nowrap solution where the parent UL for each LI menu is sized automatically so that i don't enforce an over sized boundary that has excess white space.
The menu is below:
<div class="container">
<ul id="nav">
<li>Home</li>
<li>generic
<span id="s1"></span>
<ul class="subs">
<li>generic</li>
<li>generic 1
<ul>
<li>generic 1</li>
<li>generic 2</li>
<li>generic 3</li>
<li>generic 4</li>
<li>generic 5</li>
</ul>
</li>
<li>Week 2
<ul>
<li>Day 1</li>
<li>Day 2</li>
<li>Day 3</li>
<li>Day 4</li>
<li>Day 5</li>
</ul>
</li>
<li>Week 3</li>
<li>Week 4</li>
<li>Continual Education</li>
</ul>
</li>
<li>generic
<span id="s2"></span>
<ul class="subs">
<li>generic
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>Tech
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic
</li>
<li>generic
</li>
</ul>
</li>
<li>generic
<span id="s3"></span>
<ul class="subs">
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic
<span id="s4"></span>
<ul class="subs">
<li>generic
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic</li>
<li>generic/generic/generic</li>
<li>generic
<span id="s5"></span>
<ul class="subs">
<li>generic</li>
</ul>
</li>
</ul>
</div>
I'm linking the whole project via JSFidle because it's just too much to put here and there's linked content. Make note in the running version in JSFiddle that when you hover over a menu the black border (which is the box, in the final version it will just be a basic drop shadow) in most of the sub menus is smaller than the content - this is what I'm trying to solve.
JSFiddle Project
If you can help I greatly appreciate it!
Didn't find an answer here that matches quite my scenario, but have tried to consider answers for similar questions - to no avail.
In your #nav ul.subs > li class, you are setting side padding relatively with %.
Changing this to absolute value in px has fixed the problem - saved to your fiddle.
I am using the bootstrap tabmenu but now I want to make it a dropdown menu. I know that bootstrap have native support for this but I want the dropdown to be toggled only if the caret is clicked, if the rest of the menu item area are clicked that should work as an ordinary link. Do anyone know how to do this?
Here is what the code looks like today
jsfiddle-example
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
I am trying to write my article beside my vertical menu, but all my article going inside that menu. I want my menu to be fixed on that page on the left side and all my new articles or any pictures should come on after menu.
MY HTML
<nav id="wrapper-250">
<ul class="accordion">
<li id="one" class="files">
Health Beat
<ul class="sub-menu">
<li><em>01</em>Sub Menu 1
<ul class="sub-sub-menu">
<li><em>a</em>Sub Menu 2</li>
<li><em>b</em>Sub Menu 2</li>
<li><em>c</em>Sub Menu 2</li>
<li><em>d</em>Sub Menu 2</li>
<li><em>e</em>Sub Menu 2</li>
</ul>
</li>
<li><em>02</em>Sub Menu 1</li>
<li><em>03</em>Sub Menu 1</li>
<li><em>04</em>Sub Menu 1</li>
<li><em>05</em>Sub Menu 1</li>
</ul>
</li>
<li id="two" class="mail">
Mail
<ul class="sub-menu">
<li><em>01</em>Hotmail</li>
<li><em>02</em>Yahoo</li>
</ul>
</li>
<li id="three" class="cloud">
Cloud
<ul class="sub-menu">
<li><em>01</em>Connect</li>
<li><em>02</em>Profiles</li>
<li><em>03</em>Options</li>
<li><em>04</em>Connect</li>
<li><em>05</em>Profiles</li>
<li><em>06</em>Options</li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
</nav>
<div id="body-part">
<p>
</P>
</div>
http://codepen.io/anon/pen/XbXbqQ
Add a big padding-left to your #body-part:
padding-left: 500px; /* example */
Demo here: http://jsfiddle.net/baLq1d1k/
Or you can do it using jquery if the width of your #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));
i have a site with multiple pages inside a single index.html.
the menu elements call for these pages using a path "#!/..."
<nav class="menu">
<ul id="menu">
<li id="item1"><span></span><a "javascript:void(0)" href="#!/">home</a></li>
<li id="item2"><span></span>about us</li>
<li id="item3"><span></span>what we do</li>
<li id="item4"><span></span>our work</li>
<li id="item5"><span></span>links</li>
<li id="item6"><span></span><span></span>opportunity alert</li>
<li id="item7"><span></span>contact us</li>
</ul>
</nav>
This seems to work okay except when you scroll down the page, then click another link, then click the link to the previous page you scrolled down on. This returns you to where you were scrolled down previously. I need it to return you to the top of each page when you click on any page link.
Just take out the pound sign:
<nav class="menu">
<ul id="menu">
<li id="item1"><span></span><a "javascript:void(0)" href="/">home</a></li>
<li id="item2"><span></span>about us</li>
<li id="item3"><span></span>what we do</li>
<li id="item4"><span></span>our work</li>
<li id="item5"><span></span>links</li>
<li id="item6"><span></span><span></span>opportunity alert</li>
<li id="item7"><span></span>contact us</li>
</ul>
</nav>