I'm building a progressive web app that outputs data onto the pages via an API. For example, there could be one page called about us and in about us could have history, location, etc... for its sub nav. Here are a couple of examples as to what I mean:
When on the health & wellbeing page
When on the about us page
The issue that I am having is because the about us links are contained in a UL element that is contained in the about us LI element, it positions the sub nav to start directly underneath it and not underneath where the logo is.
Here is the structure of the HTML code that populates the navigation, based on when visiting the about us page.
<ul>
<li id="nav-1">
Home
</li>
<li id="nav-2" class="open-two">
Health & Wellbeing
</li>
<li id="nav-13" class="open-two">
About Us<span><i class="arrow down"></i></span>
<ul class="level-two" style="display: grid;">
<li>About Us Home</li>
<li id="nav-8">
History
</li>
</ul>
</li>
</ul>
Now I did try using margin-left:-346px; on the level-two UL element, which produced the following examples:
When on the health & wellbeing page
When on the about us page
Looks better on the health & wellbeing page, but then I realised after seeing the about us page that margin-left:-346px; didn't really fix the issue due to it only moving to the left a certain number of pixels.
So my question is, how do I get the dynamic sub nav to start underneath the logo and not start underneath its parent nav item so it turns out like the third image?
Update: Here is another example of what I am referring to https://jsfiddle.net/hkctdpqn/1/
I figured it out. I had to make the position of the parent UL element relative and make the position of the level-two UL element absolute. Then I adjusted the margin-left value until they all started underneath the logo and not to their parent elements.
Related
i have a site, 4yourtype.com. On the home page there is a button "Blood Type Diet App" i'm tryin to replace it with a dropdown menu button. However whenever i add the following the drop menu does not appear but does seem to be working:
<div class="Cusdropbtn">
<button onclick="cusMenu()" class="Cusdropbtn has-child">I'm here to...</button>
<div id="myDropdown" class="Cusdropbtn-content">
<ul>
<!--edit links here-->
<li>Weight Loss</li>
<li>Gain Energy</li>
<li>Reduce Stress</li>
<li>Immune & Seasonal Support</li>
<li>See Best Sellers</li>
</ul>
</div>
</div>
I have tried replacing and removing most of the css and just cant seem to find what is stopping it from functioning properly. Any help would be greatly appreciated. I tried replacing the code between the <li></li> tag where the current button resides.
Now that I understand your problem, I've discovered the solution. You have conflicting styles in your menu: specifically your dropdown list (.Cusdropbtn-content ul) and generic lists in the header (.sf-menu ul, .PageMenu li ul).
You'll see that the latter styles both have the same or higher specificity and are defined later in stylesheets with higher priority than yours.
My first note is that your custom styles should be included after the base styles in your HEAD element to ensure that any style you overwrite have priority. Second, both .sf-menu ul and .PageMenu li ul set the position of the list to absolute, which means that it's being moved out of its container. You should have something like postion: static !important on .Cusdropbtn-content ul if you want to ensure that it is unaffected by the offending styles.
Right now I am working on the website of a project working with handicapped people and looking for a mobile navigation with great accessibility and a no-js fallback. First i was thinking about using the :target-pseudoclass to open and close the navigation, but I cant open a sub-navigation this way since the main-nav closes if it looses the target. Then I was looking at the checkbox hack but there I get a roblem with the accessibility since Checkboxes or Radio-Buttons have another use case, a different way of control and also they are form elements, you should not use outside a form. Is there any clean and accessible way to get such a navigation working?
I hve a navigation like thw following:
<nav>
<ul>
<li>
Link
<ul class="sub-menu">
<li>
</li>
</ul>
</li>
</ul>
</nav>
The navigation can be quite big so I dont want the sub menus to be visible the whole time (if possible), so that you dont need to scroll such along time.
This is not a question to give me the exact code, I just need some hints to find a way for an easy accessible no-js mobile navigation with sub-menus (maybe with an example)
I have this weird thing happening to me.
I have a menu and I try to create a mega menu.
I`m adding a ul in anchor tag to create the mega menu but it s pushed out of it. Anyone know why?
HTML:
<ul class="header_menu">
<li>
<a href="#">
Menu 1
<ul class="sub_menu">
<li>Submenu 1</li>
</ul>
</a>
</li>
and check this picture of html using view source.
image using view source
The ul sub_menu is pushed out of the anchor and its placed near it, not as a parent of anchor tag.
Any ideas?
EDIT:
As Quentin said, and according to w3c "Nested links are illegal".
A more detailed explanation here:
https://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Your HTML is invalid.
See The a element:
Content model: Transparent, but there must be no interactive content descendant.
You cannot have a link as a descendant of another link.
If you remove the nested link, then the problem goes away:
You probably want "Menu 1" to be a link and "Submenu" to be a different link. So end your first link before the nested list.
I am trying to write a theme with multi menu at the header, should i use multi nav tag for each of them? Or wrap them all inside a nav tag?
Here is the example codepen.
header-a wrap everything inside nav tag.
header-b wrap menu and the element that between menu inside nav.
header-c wrap menu inside nav by each.
header-d add nav tag inside each bar to wrap everything inside bar.
Which method will be good in this case?
Thank you so much.
I think this is about semantics.
A nav element should wrap items that are part of the same navigation structure.
For example:
<nav id="topNav">
<ul>
<li><a>Home</a>
</li>
<li><a>About</a>
</li>
<li><a>Contact</a>
</li>
</ul>
</nav>
<nav id="sideNav">
<ul>
<li>Products</li>
<ul>
<li><a>Oranges</a>
</li>
<li><a>Apples</a>
</li>
<li><a>Pears</a>
</li>
</ul>
</ul>
</nav>
<nav id="socialNav">
<ul>
<li><a>Facebook</a>
</li>
<li><a>Twitter</a>
</li>
<li><a>LinkedIn</a>
</li>
</ul>
</nav>
See this article
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
It does not seem there is an exact answer to this. Rather, the correct answer depends on how you want the semantics of the website to be read.
Try looking at the following sources:
http://html5doctor.com/nav-element/
https://stackoverflow.com/questions/14100279/html5-semantics-for-multiple-nav-
elements
http://w3bits.com/css-responsive-nav-menu/
There is information that states that all 4 of your options would be semantically correct. What you need to think about is how you want the navigation to be interpreted: 1) Should it be seen as one main menu? Then you would want header-a; 2) Should the menus be seen as groups of related menus? Then any of header-a, header-b or header-c would work.
I know I have not exactly given you an answer to your question but from what I can work out there is no straight forward answer.
Hope this helps in some way.
So I have a portfolio website. 6 squares which which are clickable. I want the site beneath the item that's is clicked to slide down and i want it to display details for this portfolio item in the space thats created by sliding down the content.
I want the effect described in the following link. But this is only working for one item. I've got 6. If item 1 is clicked, content slides down and you get details. What I want is when you click item 2, the details from item 1 slides back up and the details for item 2 slides down.
How to slide down a div then .fadeIn() the content and vice versa?
An example: http://www.applove.se
Scroll down to the portfolio on this site and click on an item to see what I want to achieve.
This is my html. There is a UL above this, but for some reason when I copy it, the whole thing just gets messed up.
<li class="port_list">
<div id="port_img1"> intro_img1 </div>
</li>
<li class="port_list">
<div id="port_img2"> intro_img2 </div>
</li>
<li class="port_list">
<div id="port_img3"> intro_img3 </div>
</li>
</ul>
<ul id="wrapper_portfolio">
<li class="port_list">
<div id="port_img4"> intro_img4 </div>
</li>
<li class="port_list">
<div id="port_img5"> intro_img5 </div>
</li>
<li class="port_list">
<div id="port_img6"> intro_img6 </div>
</li>
</ul>
CSS wil make sure that the first 3 li will display horizontal. The last three are also displayed horizontally beneath the first three. I am not working with images, but with background-images for every div.
EDIT:
Mike asked me to fiddle my html and css. Zo here it is. http://jsfiddle.net/StillD/bDMxs/
The pink boxes are my portfolio items. Beneath them I want to present detailed information (whole browser width) of the portfolio item you click. So when you click portfolio item 1, the 3 items (displayed horizontally) beneath it should slide down to make room for the details of portfolio item 1. If you click item 2, the details of item 1 should disappear to make room for the details of item 2, and so on.
(The details are represented by the picture of the bird for now).
i think I understand what you want. here is a very simple jsfiddle example.
http://jsfiddle.net/yRcnz/1/
basically you will need some sort of element before each ul so the user has a place to click. once you have that area for a user to interact with, some simple javascript can toggle() the display of the ul elements.
$('.expandable-ul li').click(function() {
$(this).children('img').toggle();
});
$('.expandable-ul img').toggle();