I am trying to make the dropdown menu of my navigation bar keyboard accessible as well. However, unsuccessfully. I have read WAI instructions and applied them but it doesn't seem to work. I don't want to use javascript (if possible)! The following is the code:
<nav id="main-menu" role="navigation" aria-label="Main navigation" role="navigation"class="fixed">
<ul class="sf-menu fixed" id="menu">
<li class="dropdown"> Υπουργείο
<ul role="menubar" aria-label="Main Menu" >
<li>Όραμα και Αποστολή</li>
<li>Υπουργός</li>
<li>Γενικός Διευθυντής</li>
<li>Προηγούμενοι Υπουργοί</li>
<li>Οργανωτική Δομή</li>
<li>Συμβούλια / Επιτροπές</li>
</ul>
</li>
<li class="dropdown"> Επιδόματα και Παροχές
<ul>
<li>Ελάχιστο Εγγυημένο Εισόδημα και Δημόσιο Βοήθημα</li>
<li class="dropdown">Οικογένειας και Παιδιού
<ul>
<li>Ειδικό Βοήθημα Τοκετού σε Άγαμες Μητέρες
<li>Επίδομα Τέκνου, Επίδομα Μονογονεϊκής Οικογένειας
<li>Τιμητικό Επίδομα Πολύτεκνης Μάνας
<li>Επίδομα Πατρότητας
<li>Σχέδιο Παραχώρησης Ωφελημάτων σε Οικογένειες που Αποκτούν Τρίδυμα και Άνω </ul>
</li>
<li>Εργασίας/Ανεργίας</li>
</ul>
</li>
</ul>
Also, I would like to add a small arrow which changes accordingly when the menu is expanded/collapsed. How can I do that with CSS and for it to be keyboard accessible as well?
Thanks in advance.
Related
This question already has answers here:
What is the difference between id and class in CSS, and when should I use them? [duplicate]
(15 answers)
Closed 4 years ago.
Confused about the hierarchy for applying .css when mixing .class and #id
I would like the .css that will make this entire subsection of the menu display: none;
EDIT : Yes, the first suggestion did remove the submenu, but also removed the other items, I should have posted the entire Menu first time.
This spits out Menu where I do want some available and some not.
Overview Yes
Reerrals No
Payments No
Help No
Logout Yes
Marketing and its submenus - NO
Profile and its submenus - Yes
<div class="uap-ap-menu">
<ul>
<li class="uap-ap-menu-tab-item `enter code here`"><i class="fa-uap fa-overview-account-uap"></i>Overview</li>
<li class="uap-ap-menu-tab-item "><i class="fa-uap fa-referrals-account-uap"></i>Referrals</li>
<li class="uap-ap-menu-tab-item "><i class="fa-uap fa-payments-account-uap"></i>Payments</li>
<li class="uap-ap-menu-tab-item "><i class="fa-uap fa-help-account-uap"></i>Help</li>
<li class="uap-ap-menu-tab-item "><i class="fa-uap fa-logout-account-uap"></i>LogOut</li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item" ><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-profile"></i>Profile</div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_profile">
</ul>
</li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item" ><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-marketing"></i>Marketing</div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_marketing">
</ul>
</li>
<li class="uap-ap-submenu-item"><div class="uap-ap-menu-tab-item" ><i class="uap-ap-menu-sign fa-uap fa-account-right-uap" id="uap_fa_sign-reports"></i>Overall</div>
<ul class="uap-public-ap-menu-subtabs" style="" id="uap_public_ap_reports">
</ul>
</li>
</ul>
</div>
It's because in css rules any id value has much stronger effect than class, so selector with id ALWAYS override selector with class.
Please, see this answer
I'm using ExpressJS and EJS as my Views.
in my navbar I have links that need to have a class="active" when the user is on that current page. put if I use partials in my views. how am I going to do it?
sample
Index.ejs
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="/Index">Home</a></li>
<li>About</li>
<li>Work</li>
</ul>
About.ejs
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li><a class="active" href="/About">About</a></li>
<li>Work</li>
</ul>
Work.ejs
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li><a class="active" href="/Work">Work</a></li>
</ul>
that is my way of doing it!.. by making a navbar everytime I make a new page
how should I make it that when i render a new page is doesn't need to render the navbar again?
You could pass the value of the "active" route as a local var to the partial..
<%- include('partial/nav', {active: "About"}); %>
Then, check the active var to set the "active" class in the nav partial template:
<ul class="nav navbar-nav navbar-right">
<li><a <%if(active=="Home"){%>class="active"<%}%> href="/Index">Home</a></li>
<li><a <%if(active=="About"){%>class="active"<%}%> href="/About">About</a></li>
<li><a <%if(active=="Work"){%>class="active"<%}%> href="/Work">Work</a></li>
</ul>
Here's a similar approach
You should load your navigation like this--
<script>
$("#header").load("header.ejs");
</script>
Then retrieve the url of the current page and from that retrieve the active page name . Then use this function to add the active class to the current page,
$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});
NOTE: you need to retrieve the page name from your url through some function as it would be the full page url.
You will have to write the header.ejs only once and include it on every page.
Hope this helps!
For a new application we are using Bootstrap v3.0, which has the navigation menu defined as follows:
<div id="sidebar">
<ul>
<li class="active"><i class="icon-home"></i> <span>Dashboard</span></li>
<li class="submenu">
<i class="icon-beaker"></i> <span>UI Lab</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Interface Elements</li>
<li>jQuery UI</li>
<li>Buttons & icons</li>
</ul>
</li>
<li class="submenu">
<i class="icon-th-list"></i> <span>Form elements</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Common elements</li>
<li>Validation</li>
<li>Wizard</li>
</ul>
</li>...
This is currently sitting in a shared _Layout.cshtml, and don't currently see a need to move this into its own shared view.
The layout template consists of several static files with <li class="active"> hard coded for the corresponding menu item within that file.
Since I'm building this with MVC4, I would like to know how to dynamically set this, based on the view being displayed.
Not sure best practice on this. You could try something like this:
<li class="#( RouteVariable.CurrentController.Equals("Home") ? "active" : "")">
Or RouteVariables.CurrentAction may be of use.
Below is my HTML
<ul><li class="section">BROADCASTING</li>
<ul>
<li class="subsection"></li>
<li class="circle">STATION BREAK</li>
<li class="circle">Labor pains, hunger pangs</li>
<li class="circle">Wake-up call for Dream Team</li>
<li class="circle">News crew turns rescuer</li>
<li class="circle">Chopper safety had been challenged</li>
<li class="circle">Nielsen adds Dayton..</li>
<li class="circle">Mondale watch</li>
<li class="circle">Those 70s clearances</li>
<li class="circle">Oscar goes to ABC</li>
<li class="circle">Hearst-Argyle gives a green light</li>
<li class="circle">Finding Geena Davis</li>
<li class="circle">Syndication Wrap-up</li>
<li class="circle">CBS TV news pioneer dies at 86</li>
<li class="circle">New York anchor remembered</li>
<li class="circle">News sharing in West Virginia</li>
<li class="circle">News dropping in Orlando</li>
<li class="subsection">Null</li>
<li class="circle">GET WITH THE PROGRAM</li>
<li class="subsection">PEOPLE'S CHOICE</li>
<li class="circle">Syndication as branding</li>
</ul>
</ul>
Now i want to seperate sections and subsections and get the url inside subsections.
i have go to the each sections
Now as per the HTML structure, section is in seperate li which closes before subsection opens, so once i have reached section, i have to move back to ul and then have to continue to get subsection
However when i try ../ to go back to the ul (the one before section), it says ivalid token
This is what i tried to come back to the parent one.
HtmlNodeCollection sections = doc.DocumentNode.SelectNodes("//ul/li[#class='section'][contains(text(), 'BROADCASTING')]../ul");
but this does not works
Can anyone tell me where i am going wrong, it will be a kind help.
You need to change your xpath expression a bit:
var subsections = doc.DocumentNode.SelectNodes("//ul/ul[preceding-sibling::li[#class='section' and .='BROADCASTING']]/li[#class='subsection']");
It searches for <ul> inside <ul> that has <li class="section">BROADCASTING</li> as a previous sibling, and then searches for <li class="subsection"> inside it.
So the code above selects all the subsections under BROADCASTING section.
Hope this helps.
Suppose I have 2 pages Contact, About.
wp_nav_menu( array( 'show_home'=>true ) )
will display three links as 'Home', 'Contact', 'About'.
Here I would like to add one more custom link as 'Example' and navigate to www.example.com
Excepted result
<div class="menu">
<ul>
<li>
<a title="Home" href="http://www.test.com/">Home</a>
</li>
<li class="page_item page-item-2 current_page_item">
<a title="About" href="http://www.test.com/?page_id=2">About</a>
</li>
<li>
<a title="Home" href="http://www.test.com/?page_id=3">Home</a>
</li>
<li>
<a title="Home" href="http://www.example.com/?page_id=3">Example</a>
</li>
</ul>
</div>
This is using the new built in Menus available under Appearance -> Menus. Above the box of Pages there is a place to add custom links. You would put in "Example" and "www.example.com" and click "Add to Menu".