I want to add my navigation in the sidebar, and there isn't space for it.
I want to set it up so that when I hover over a word such as (Links) a list will appear. But I'm not sure what code I should be using to accomplish this.
An example can be seen here: http://www.colourlovers.com/ when you hover over Browse it shows a list of other links.
<div id="navigation">
<a href="http://aftermidnightworkouts.tumblr.com/tagged/healthyrecipes">Dear
Charlie</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Portfolio</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Aftermidnightworkouts</a><br>
<a href="http://aftermidnightworkouts.tumblr.com/tagged
/healthyrecipes">Writings</a>
</div>
Here's a little bit of code to get you started:
http://jsfiddle.net/jonigiuro/ZsAQb/
<ul id="navigation">
<li>
Dear Charlie
<ul class="subnav">
<li class="item">
subnav item1
</li>
<li class="item">
subnav item2
</li>
</ul>
</li>
</ul>
It's better to use a list for navigation menus like yours, it would be even better to wrap it in a nav tag (html5).
The trick is that you insert a child list for the subnavigation inside a list item of the main navigation and set it's css to be hidden by default. When you hover on a main navigation item you just target it's child subnavigation and display it
Just google for CSS drop down menu, lots of pages about it, you can even have it generated and then inspect the code yourself (for example here). You just need a bit of css code that use :hover selector.
Related
I have a simple question. Should the button, that I use to open/close my navigation menu be included in the nav tags?
The button itself is not helping in navigating but without him, there is no access to navigation.
<nav>
<ul class="nav">
<li class="nav__el nav__el-active">Home</li>
<li class="nav__el">Generic</li>
<li class="nav__el">Services</li>
<li class="nav__el">Blog</li>
<li class="nav__el">Contact</li>
</ul>
<i class="fas fa-bars"></i> //menu btn
</nav>
that's the example. Now the btn is in the nav, but it also can be like that:
<div class="topbar">
<nav>
<ul class="nav">
<li class="nav__el nav__el-active">Home</li>
<li class="nav__el">Generic</li>
<li class="nav__el">Services</li>
<li class="nav__el">Blog</li>
<li class="nav__el">Contact</li>
</ul>
</nav>
<i class="fas fa-bars"></i> //menu btn
</div>
At first glance, when reading this at WHATWG:
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
It seems to me that the button should not be included, as that's clearly not a navigation link.
Anyway, if you continue reading:
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
With that in mind, it makes sense to include that button and any other non-link control you might have (usually in the header area) because if a screen reader user wants to...:
...skip the whole navigation, they also want to skip the other controls that are not links.
...jump straight to the navigation, they might also want to use some navigation elements that are not links.
If you check some of the examples at WHATWG, it looks like they are applying these criteria. The first example is:
<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>...</nav>
<article>...</article>
...
</body>
Here, it makes sense not to skip the title on the page (to know where you are) but then skip all the navigation elements and jump straight to the content.
However, on the last one:
<nav>
<h1>Folders</h1>
<ul>
<li><a ...>... </a></li>
...
</ul>
</nav>
It would make sense to skip the Folders heading element if you are not interested in the navigation because it's actually part of it, the same way you put the heading of a section inside a section and not before it. The same applies to your menu button.
Some other examples of elements that might be part of the main navigation of the site, and thus go into <nav> are logos that link to the root of the site or search forms.
For example, LinkedIn is doing that:
Also, Bruce Lawson, who is part of the Accessibility Task Force, has the search inside the <nav> element on his personal website:
However, you can also find examples of the opposite. For example, AirBnB only includes some links in the <nav> element:
While in this case, I would have also included the search, that for me clearly represents the main way to navigate on their site.
Anyway, you could and should also use ARIA for accessibility and structured data / Schema.org markup for search engine support.
I am using angular and UI-Router to build a website.
I have a menu sidebar on my page. some of the menu items have sub-menu items, so I am trying to implement collapse functionality to display the sub-menu item when user click on the parent menu item.
In my parent menu item, I have an so when the user clicks on the menu link it should display the sub menu items. the problem is when the user clicks on the link it changes the url and redirects to the homepage.
A sample of my HTML is given to better understand.
<li>
Menu Item 1
<ul>
<li>link1</li>
<li>link2</li>
</ul>
</li>
Remove the # from the href like so:
<li>
Menu Item 1
<ul>
<li>link1</li>
<li>link2</li>
</ul>
</li>
Or alternatively, replace them with span tags and style them using cursor: pointer. I'm not sure which one is more semantically valid, but either will work.
Remove href and replace with ng-href (angular href good practice)
<li>
<a ng-href="/iwannago/tonexpage">Menu Item 1</a>
<ul>
<li><a ng-href="">link1</a></li>
<li><a ng-href="">link2</a></li>
</ul>
</li>
Using angular values is a Good Practice and Gets support Because ng-** keywods tags etc are from angular family
It is such that I have a menu where there is a border in the page you're into, just currently the whole time on the index page, but if I click onto the news as it should be less.
I have tried so many ways but none of them works, think a little that you can do it with something GET?
This means that it must move to find the page you are on, and view page not in the menu so it should not be there.
there are border in Home, how can I do so that, for example, I go into the info then border under the info and not the front, what should I do there?
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown active"><span>Forside</span></li>
<li class="pi-has-dropdown"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
Ses image HER
Here you can see how my menu appears when I click on the info.
The answer is as simple as this: see the pi-has-dropdown active part. If you don't want it, just remove it. If you want it in other pages, add it to each page, for example in Info, like this:
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown"><span>Forside</span></li>
<li class="pi-has-dropdown active"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
. You usually do this with the help of a CMS or some JS/Jquery coding, but you could totally hard code it on each page if you want. This way, you need to copy this snippet of code on each page, only changing the active class keeping in mind in which page are you. As simple as that
I'm having trouble finding the reason why my navigation menu is not popping up when I hover over "English". The other menu pop up without problem.
http://jsfiddle.net/B6ZcG/
Can someone help me find the error?
Your hovering <li class="top"> element needs to include (wrap) the child <ul> containing all the language links. Since its pretty hard to explain how to find the error here the updated code on jsFiddle.
http://jsfiddle.net/B6ZcG/2/
You had a rouge </li> in your markup
<li class="top"><span class="trf trf-english"></span>English</li>
<ul>
Should be
<li class="top"><span class="trf trf-english"></span>English
<ul>...
FIDDLE
I am currently trying to style my navigation bar with different colors for each list item.
Here is the html code
<ul>
<li id="item1">Home </li>
<li id="item2"> About </li>
<li id="item3"> News </li>
<li id="item4"> Video </li>
<li id="item5"> Donate </li>
<li class="part">Contact </li>
</ul>
And here is the css code
#item1{background:#7375D8};
#item2{background:#4E51D8};
#item3{background:#1A1EB2};
#item4{background:#303285};
#item5{background:#080b74};
#header ul li.part
{
background:#689AD3;
}
For some reason only item 1 and li.part are actually displaying the colors correctly , the rest display nothing in all browsers.
Dreamweaver however is displaying all the colors in the preview section so I have no clue what the problem is with them .
Many thanks for your contributions.
It's just a syntax error! The semicolons should be inside the curly braces!
#item1{background-color:#7375D8;}
#item2{background-color:#4E51D8;}
#item3{background-color:#1A1EB2;}
#item4{background-color:#303285;}
#item5{background-color:#080b74;}
#header ul li.part
{
background-color:#689AD3;
}
You have not closed the semicolons properly, it was outside the braces so thats the reason it was not working. See the css rules below for correct one.
Write your css like below:
#item1{background:#7375D8;}
#item2{background:#4E51D8;}
#item3{background:#1A1EB2;}
#item4{background:#303285;}
#item5{background:#080b74;}
#header ul li.part{background:#689AD3;}
the semi colons should be before the closing brace for each style. the unclosed tags are causing the problem