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.
Related
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.
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 have the following array / sub array structure
"filters": {
"types": {
"34": "Ford",
"22": "Jeep",
"18": "Porsche",
},
"locations": [
"Earth",
"Mars",
"Moon",
]
}
and the following handlebars template
{{#if filters}}
{{#each filters}}
<div class="cars">
<ul class="cars__list">
<li class="cars-{{#key}}__title">Filter by {{#key}}:</li>
<li class="cars-{{#key}}__filters">
<ul>
<li class="cars-{{#key}}">View All</li>
{{#each this}}
<li class="cars-{{*want to access filters[key]*}} color={{#key}}">{{this}}</li>
{{/each}}
</li>
</li>
</ul>
</div>
{{/each}}
{{/if}}
I'm having trouble accessing the filters[types] and filters[locations] within the each this loop.
In my CSS I'm using a classes called .cars-type and .cars-location. I want to be able to style each list separately and unfortunately target each li with a class. I want to apply these styles within the each this loop.
I can do it within the filters loop by using {{#key}} but not in the each this loop
I've tried
<li class="cars-{{../filters}}">{{this}}</li>
but this just returns the car type like ford - I want the key ie. '34' in this case
<li class="cars-{{lookup ../filters #index}}">{{this}}</li>
using handlebars helper lookup but again no luck
<li class="cars-{{../this}}">{{this}}</li>
and the above which gives me [object Object]
I've checked out handlebars - is it possible to access parent context in a partial?, handlebars.js: relative paths in partials not working and Lookup helper in handlebars but no luck with any of the solutions
EDIT Here's the HTML output that I want to produce
<div class="cars">
<ul class="cars__list">
<li class="cars-types__title">Filter by types:</li>
<li class="cars-types__filters">
<ul>
<li class="cars-types">View All</li>
<li class="cars-types color-34">Ford</li>
<li class="cars-types color-22">Jeep</li>
<li class="cars-types color-18">Porsche</li>
</ul>
</li>
</ul>
<ul class="cars__list">
<li class="cars-locations__title">Filter by locations:</li>
<li class="cars-locations__filters">
<ul>
<li class="cars-locations">View All</li>
<li class="cars-locations color-0">Earth</li>
<li class="cars-locations color-1">Mars</li>
<li class="cars-locations color-2">Moon</li>
</ul>
</li>
</ul>
</div>
You should reconsider your HTML because a ul cannot be a direct child of another ul. See https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context
With that said, we can solve your problem. The Handlebars docs have our answer:
Nested each blocks may access the interation variables via depth based
paths. To access the parent index, for example, {{#../index}} can be
used.
Therefore, your problematic line should look like the following:
<li class="cars-{{#../key}} color-{{#key}}">{{this}}</li>
How do you add a span tag inside of an a tag using Html.ActionLink? Is something like this at all possible?
I am using ASP.NET MVC 4 together with Twitter Bootstrap version 3.
I have a drop down menu and the HTML looks like this:
<ul class="nav navbar-nav">
<li class="#(Model.Equals("Home") ? "active" : "")">
<a href="#">
<span class="glyphicon glyphicon-home"></span> Home
</a>
</li>
</ul>
I was wanting to do the link like this:
<li>#Html.ActionLink("Home", "Index", "Home")</li>
But there is a span tag in the mix of things which makes it a bit more complex.
I can probably also use the following:
<a href="#Url.Action("Index", "Home")">
<span class="glyphicon glyphicon-home"></span> Home
</a>
Curious to know if the above is possible?
Your variant with Url.Action("Index", "Home") is correct and possible. Url.Action returns the url, so it can be used in a href.
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.