I am trying to optimize my code.
I have a menu that navigates me between multiple pages. I want to keep the same menu on each page, but I want the name of the page I am currently on to show up in a menu in a different color.
Here is the code I put in each page:
<nav class="stroke" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
<ul>
<li>Home</li>
<li>Data Upload</li>
<li>Data Transformation</li>
<li>Database View</li>
<li>Maintenance</li>
<li>Log</li>
</ul>
</nav>
As you can see, I am currently on Database View page, so "Database View" menu item is highlighted in orange. If Log page document, I have "Log" menu item highlighted in Orange.
This solution is simple and it works, but I was wondering if it's possible to do this in a more efficient manner. Something CSS related. I would like to avoid making it it too convoluted, like putting a bunch of if/else statements and echoing lines from PHP, or doing innerHTML from Javascript.
Thanks,
Jake
Related
So here is the html code for the contents of my first drop down menu:
<nav id="side-nav" style="display:none;">
<ul id="side-nav-content">
<li>
Information for Current Students
</li>
<li>
Timetables & Programme Structures
</li>
<li>
Support Services
</li>
</ul>
</nav>
So i'm trying to implement dynamic sub drop down menus for each of the three list items.
I originally tried adding a list within a list however that was just a shot in the dark and I never really expected it to work. I'm pretty stumped and am just looking for a pointer to the best way to go about doing this.
You can see this example, "Twitter Bootstrap Responsive Navbar with Multiple Dropdowns (Childrens)" here:
https://github.com/fontenele/bootstrap-navbar-dropdowns/blob/master/README.md
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.
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
Recently I've been implementing ARIA into a web application and I found this question to be quite helpful in the improving the navigation parts.
After implementing this in all modules, I discovered this HTML validation error:
Attribute aria-selected not allowed on element a at this point.
Looking at the ARIA specification, I see that aria-selected is only used in roles gridcell, option, row, and tab. In my case, the role of the link is menuitem.
This is a representative sample of the HTML code:
<nav role=navigation>
<ul role=menubar>
<li role=presentation><a href='page1.php' role=menuitem>Page 1</a></li>
<li role=presentation><a href='page2.php' role=menuitem>Page 2</a></li>
<li role=presentation><a href='page3.php' role=menuitem aria-selected=true>Page 3</a></li>
<li role=presentation><a href='page4.php' role=menuitem>Page 4</a></li>
</ul>
</nav>
As you can see, this is taken on "page 3".
What is the correct ARIA role to use here?
you may also use aria-current="page" for describing current displayed page among navigation items.
I believe that aria-selected is for 'widgets' that are one-tab stop, like a set of tabs that you then arrow around to select. The selected aspect is about which one is in focus, not which page you are on.
I would check out this as a well tested example:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizontal%20(Internal%20Content)/demo.htm
From: http://whatsock.com/tsg/
For showing the current page I would probably use a more traditional method: Make it not a link. E.g:
<li><a href='page2.php'>Page 2</a></li>
<li><strong>Page 3</strong></li>
This also prevents people from clicking on the same-page link by accident (which I see quite often in usability testing). You can apply the same CSS to nav ul a and nav ul strong and then override the styling for the strong.
Short answer: you can use aria-current="page" or aria-current="location" to indicate the current link in a list of links.
Your pagination component could be improved in terms of accessibility (you can see this as a variation of the similar breadcrumbs pattern):
<nav aria-label="pagination">
<ol>
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
</ol>
</nav>
A few notes:
Use <nav> to automatically use the navigation landmark (<nav> is equivalent to <div role="navigation"> but shorter and more elegant)
Use aria-label to provide a meaningful name to the <nav> (most likely, you have more <nav> elements on the page and you should label each one accordingly).
Use to make the set of links structured. This can also help screen reader users as it will be announced as "pagination, navigation (next) list, 4 items, helping users understand how many pages there are.
Use aria-current="location"oraria-current="page"` current page of the list (this is most likely shown in a different style as the other pages, but we need to mark it for screen reader users).
I have developed a webpage using the BootStrap framework and have a question about list items in my header.
How can I add a list to a list item?
Here is a link to my website: http://www.canninginc.co.nz/
As part of the header, I have a Products drop down list with an item 'CanLucidDream'. I am wanting to add a list (with list items) to this 'CanLucidDream' item. E.g. Galley, about etc
How can I do this?
EDIT
I did not explain what I am after very well. Basically, I want to have a list of items for the product CanLucidDream to the side of the CanLucidDream item. Like a menu item in a GUI forms application with a little arrow to the right of the menu item that then shows the list.
Is this possible in HTML/CSS?
You can, but a list within a list within a list starts looking really cluttered. If that's what you want, though, than just start a new list after the "CanLucidDream" anchor:
This is what you have:
<ul class="dropdown-menu">
<li>
CanLucidDream
</li>
</ul>
This is what it turns into:
<ul class="dropdown-menu">
<li>
CanLucidDream
<ul>
<li><a>This is the first thing.</a></li>
<li><a>This is the second thing.</a></li>
</ul>
</li>
</ul>
You'll need to style that, of course. Bootstrap might already have some sort of styling built in for drop-downs within drop-downs.