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>
Related
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<li>Home</li>
<li>About us</li>
<li class="active">Projects</li>
<li>Testimonials</li>
<li>Contacts</li>
</a>
</li>
</ul>
Hey there, I have this navbar code on my HTML project. However, when i insert my .html into validator.w3.org, i get the issue. Can someone please help me check? I'm pretty sure I closed it already..
You have to wrap those li tags inside anchor tag with ul.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<ul>
<li>Home</li>
<li>About us</li>
<li class="active">Projects</li>
<li>Testimonials</li>
<li>Contacts</li>
</ul>
</a>
</li>
</ul>
this will solve first warning in validator.
I'm using Bootstrap 3 to create a menu. Simple run of the mill html/css stuff.
Having problems when on the iPad - some of the links don't work.
The dropdown menu is working fine - as are all the links within - which seems strange. There's a "scroll-to" function on the list - might be the problem but it's not affecting the dropdown? Sort of stumped.
Thanks in advance.
Can be seen here.
http://www.lapthelough.org/index.php/lap10
<div class="navbar-collapse collapse">
<ul id="scrolling" class="nav nav-pills">
<li class="active menubadge float shadow" >Home</li>
<li>event</li>
<li>route</li>
<li>start</li>
<li>safety</li>
<li>partner</li>
<li>fundraise</li>
<li>register</li>
<!-- dropdown in main menu "DROPNAV"-->
<li class="dropdown">
… <span class="caret"></span>
<ul class="dropdown-menu">
<li>Training</li>
<li>FAQs</li>
<li>Blog</li>
<li>Forum</li>
<li class="divider"></li>
<li class="dropdown-header">Social</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
I am having a little problem with the navigation list items going a little below the top-bar when I resize the browser. When I remove the image it seems to be working perfectly fine on all screen resolutions but inserting the logo has had an affect on this. Is there any way I can solve this. Can't seem to find out what the problem is.
HTML:
<!-- HEADER START -->
<div id="header">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="index.html"><img src="img/flogo.svg" class="logo" alt="Logo">
Sharp <span>Media </span>
</a>
</h1>
</li>
</li>
<li class="toggle-topbar menu-icon"><span>menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown">
<li>Home</li>
<ul class="dropdown">
</ul>
</li>
<li class="divider"></li>
<li>FAQs</li>
<li class="divider"></li>
<li class="has-dropdown">
<li>Contact Us</li>
<ul class="dropdown">
<li class="divider"></li>
</ul>
</li>
</ul>
</section>
</nav>
Please take a look at this jsfillde.
<nav role="navigation" class="nav-main">
<ul class="nav nav-pills" id="menu-primary-navigation">
<li class="active menu-home">Home</li>
<li class="menu-about-us">About Us</li>
<li class="menu-program">Program</li>
<li class="menu-events">Events</li>
<li class="menu-donate">Donate</li>
<li class="menu-contact">Contact</li>
</ul>
</nav>
As you can see, the "about us" link is no longer clickable because of the image placed on the left of it. I have played with different z-index values to no success.
Do you have any suggestion on how to fix that?
A quick solution... Set "z-index:1000"
<nav class="nav-main" role="navigation" style="z-index:1000;">
<ul id="menu-primary-navigation" class="nav nav-pills">
<li class="active menu-home">Home</li>
<li class="menu-about-us">About Us</li>
<li class="menu-program">Program</li>
<li class="menu-events">Events</li>
<li class="menu-donate">Donate</li>
<li class="menu-contact">Contact</li>
</ul>
</nav>
Is there a way to extend this designmodo example to allow for 3 levels of navigation?
I’d very much like to use this menu example, but I can’t figure out how to add a third level of functionality. Any help would be greatly appreciated!
Example:
http://designmodo.com/css3-accordion-menu/
Here is a fiddle that i'm working with: http://jsfiddle.net/johnstonian/r5rEZ/
Here is a sample menu i'm working with:
<ul class="accordion">
<li id="one" class="files">
My Files<span>495</span>
<ul class="sub-menu">
<li id="five">
<em>01</em>Dropbox<span>42</span>
<ul class="sub-menu">
<li><a><em>01</em>3rd Level<span>9</span></a></li>
<li><em>02</em>3rd Level<span>14</span></li>
<li><em>03</em>3rd Level<span>3</span></li>
</ul>
</li>
<li><em>02</em>Skydrive<span>87</span></li>
<li><em>03</em>FTP Server<span>366</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
</ul>
</li>
<li id="two" class="mail">
Mail<span>26</span>
<ul class="sub-menu">
<li><em>01</em>Hotmail<span>9</span></li>
<li><em>02</em>Yahoo<span>14</span></li>
<li><em>03</em>Gmail<span>3</span></li>
</ul>
</li>
<li id="three" class="cloud">
Cloud<span>58</span>
<ul class="sub-menu">
<li><em>01</em>Connect<span>12</span></li>
<li><em>02</em>Profiles<span>19</span></li>
<li><em>03</em>Options<span>27</span></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>
Use a menu designed for this, such as:
CSSPlay: Multi-Level Flyout Menu
CSSPlay: A cross-browser drop-down cascading validating menu
CSSPlay: The ULTIMATE CSS only drop-down menu