the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)
Hi
I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu
I can't get passed this. Can anyone please advise.
My menu code is:
<ul id="menu">
<li id="home">Home</li>
<li id="general">General
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus">About Us</li>
<li id="ss4aagency">Agency</li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li>What's on next</li>
<li>Competitions</li>
<li>End of Year Show</li>
<li>Summer School</li>
<li>Master Classes</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
</div>
</li>
<li id="nearestclass">Nearest Class</li>
<li id="tutorials">Tutorials</li>
<li id="shop">Shop</li>
<li id="hireus">Hire Us</li>
<li id="contact">Contact</li>
the page in question is http://www.streetstyles4all.co.uk/test4.html
I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.
Try using the css z-index property for your images. As easy as z-index: 3;
Or try resizing the images also with css.
Related
I have a a navigation with a sub navigation which is hidden by default, and I want to show the sub nav for each item on click, but currently on click it shows the subnav for all items at once since the click is toggling a class. How can I only toggle the subnav of the clicked item?
HTML
<nav class="st-menu" id="menu-4a">
<ul>
<li>
Guidance Manual
</li>
<li>
Resource Directory<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>Stormwater Plan Review Resources</li>
<li>Pilot Projects</li>
<li>Proprietary Products</li>
<li>Additional Resources</li>
</ul>
</li>
<li>
Stormwater 101<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>Regulations</li>
<li>Stormwater Management</li>
<li>Stormwater Billing & Retrofits</li>
<li>Green City, Clean Waters</li>
</ul>
</li>
<li>
Contact Us<div class="toggle-arrow"><img src="/assets/images/chevron-up-solid.svg"/></div>
<ul class="reg-subnav">
<li>About Us</li>
<li>Development Review Contacts</li>
</ul>
</li>
</ul>
</nav>
jQuery
$(".toggle-arrow").click(function(){
$(".reg-subnav").toggleClass('open-sub');
});
$(".toggle-arrow").click(function(){
$(this).closest('li').find(".reg-subnav").toggleClass('open-sub');
});
Both the arrow and the element you want to toggle, belong to an <li>. You can find the closest parent li that owns both of them, then find the element you want to toggle.
This question already has answers here:
What are the allowed tags inside a <li>?
(4 answers)
Allowed child elements of ul
(3 answers)
Closed 3 years ago.
This is probably child's play to anyone who actually knows what they're doing (but I'm completely self-taught so I need a little help).
The site: http://www.sandhtestsite.kaylynnehatch.com
The W3 HTML Validator keeps returning this error:
"Element li not allowed as child of element nav in this context."
This is my nav code:
<nav id="mainav" class="clear">
<li class="active">
<li>About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</li>
Problem is, I'm not sure how else to set this up. If I remove the li tags (and related CSS), how do I get them to display properly AND still work responsively with mobile?
A list item (li) should be a child of either an ordered list (ol) or unordered list (ul). Either can be a child of nav.
In your code, you have a closing ul misplaced - that would be an issue for validation.
So, try using an unordered list around your list items.
<nav id="mainav" class="clear">
<ul>
<li class="active">About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</nav>
This happens because <li> elements should be children of <ul> or <ol>elements. In your case, you have improper formatting, thus making it seem you are missing the <ul>
write it like this instead:
<nav id="mainav" class="clear">
<ul>
<li class="active">About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</nav>
Source: http://www.w3schools.com/tags/tag_li.asp
I would wrap your Lis in a ol or ul tag.
HTML:
<nav id="mainav" class="clear">
<ul>
<li class="active">About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</nav>
You're opening one tag type of item and then closing a different item. Open and close tags need to be a 1:1 relationship. It should look more like this:
<nav id="mainav" class="clear">
<ul>
<li class="active">About Us</li>
<li>Trademark Services</li>
<li>Attorneys</li>
<li>Contact Us</li>
</ul>
</nav>
After wasting the whole day in efforts i am still not able to set the position of third level Menu. It shows always on top.
This is the Link of fiddle. Please suggest the change.
Piece of Html
<nav id="menu-main">
<ul id="menu">
<li class="item-132 deeper parent">Services
<ul>
<li class="item-132">Retail Banking
<ul>
<li class="levelThreeAlign">Sub sub menu</li>
</ul>
</li>
<li class="item-132">Types of Loans
<ul>
<li>Sub sub menu</li>
</ul></li>
</ul>
</li>
</ul>
</nav>
Whole CSS and HTML in Fiddle.
JS Fiddle
Your Problem is fixed
.item-132{ position : relative;}
I have a simple html menu that is styled using CSS.
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
What I am looking for is a way to show the user what page is currently in use by way of a coloured background on the correct bit of the navigation menu. E.g. when the user is on the career page, the li box would be a different colour to the rest of the menu to show that it is in use.
What you're going to want to do is add a class to whatever menu item is currently active. For example, the HTML markup for index.html would look like this:
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
And the markup for career.html would look like this:
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li class="active">Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then style the class accordingly:
.active {
background-color: red;
}
You can do this by adding an'active' class.
When you are on a certain page, you will add the class="active" to your link ( or li element ) . This is how wordpress and many other web application solve this.
Look here : http://jsfiddle.net/Bm9E4/2/
On the active page, add a class of .active to the LI for that page.
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then do CSS for the background:
#main li.active { background-color:red; }
I am trying to affix an image to the bottom of a nav list and have it stay there when the page scrolls.
This is what I am wanting:
This is what I am getting when the affix kicks in:
I need it to stay just like picture one. I have tried googling the problem and searching stack overflow with no results.
Here is the code:
<!--SIDEBAR NAVIGATION -->
<ul class="nav nav-list well hidden-phone hidden-tablet" data-spy="affix" data-offset-top="850">
<li class="nav-header">The Green Panda</li>
<li class="divider"></li>
<li>What We Do</li>
<li class="divider"></li>
<li>Our Solutions</li>
<li class="divider"></li>
<li>More Than Web Design</li>
<li class="divider"></li>
<li>Contacting Us</li>
</ul>
<img src="img/woody-effect.png" class="img-bottom nav-list" data-spy="affix" data-offset-top="850">
EDIT:
The selector was incorrect.
If the height of your menu is static, you can add a class to that image when it switches over to the fixed styling and apply this css:
top: 310px;
That will position it at the bottom of your menu.
I would set up a class underneath .affix and have it applied to your image (add the id panda_logo)
#panda_logo.affix {
top: 310px
}