I´m building a simple accordion type menu with bootstrap with this code:
<ul class="level_one">
<li><a data-target=".level_2" data-toggle="collapse">Level One</a>
<ul class="level_2 collapse">
<li><a>Level 2</a></li>
<li><a>Level 2</a></li>
</ul>
</li>
</ul>
<ul class="level_one">
<li><a data-target=".level_2" data-toggle="collapse">Level One</a>
<ul class="level_2 collapse">
<li><a>Level 2</a></li>
<li><a>Level 2</a></li>
</ul>
</li>
</ul>
Althought this code works well, it triggers all elements that has the .level_2 class on it and I want to target only the nested element.
I have tried several CSS selectors inside the data-target attribute but none seems to get only the next element with that specific class.
I have seen a lot of examples that uses the ID to target the desired object but I can´t because this menu will be generated dinamically and for the sake of simplicity I don´t want to create random id names to make them work together neither use extra javascript since this functionallity already works well in bootstrap.
Extra info: There will be a lot of nesting in this menu, it´s not 2 level only menu.
Is there a specific CSS selector that can target the direct simbling that I could insert in the data-target attribute?
Related
I am trying to put the BEM naming convention in action but having some confusions about naming the HTML elements. I really want to understand do I really need to provide the class name for each HTML element.
Let's say I have the following code and for example:
<ul class="nav">
<li class="nav__list"><a href="#" class="nav__link>Home</a></li>
<li class="nav__list"><a href="#" class="nav__link>Services</a></li>
</ul>
I don't want to apply CSS to the <li> elements.
So, in that case, do I need to use the element name for the <li> tag. i.e. <li class="nav__list">...</li> ?
Can I just use the element name for the anchor tag without giving element name nav__list to the <li> element?
Here is what I am thinking to do because I don't want to apply styles to the CSS to <li>:
<ul class="nav">
<li><a href="#" class="nav__link>Home</a></li>
<li><a href="#" class="nav__link>Services</a></li>
</ul>
first of all, you should have to follow BEM most of the developer followers BEM only because BEM is good at the naming convention and it's shows the standard naming convention for coding. it depends on you if you want to use BEM you can use or else it's your wish but I suggest you follow BEM it's good in standard.
you can use this
<ul class="nav">
<li class="nav__list"></li>
<li class="nav__list"></li>
</ul>
as well as this one
<ul class="nav">
<li></li>
<li></li>
</ul>
now you don't want to give style to li but in future client say you to give style to li that time what you will do again you will change the code so you have to use this below HTML code
<ul class="nav">
<li class="nav__list"></li>
<li class="nav__list"></li>
</ul>
I was working on a mini website project using django. I found bootstrap a while ago and started using some of their features. One that I really liked was the dropdown button.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
But I was having a unexpected "error"/bug. When I click on one of those buttons it will add its href to the url.
And here comes the problem. It will add the href even if the url already contains it. How can I solve this problem and where. On django scripts or with javascript?
The Problem
It looks to me like everything is behaving as it should technically, the problem is with the href target itself.
Since you have a relative link not an absolute one, it assumes it target is relative to the page you are on.
Potential Solutions
1 - Use an absolute link in this case.
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Home</li>
<li>Blog</li>
<li>Contact me</li>
</ul>
</li>
2 - Use the base tag.
This will set a root url for your website, it may cause unexpected results so check and re-check if you use this solution.
HTML Base Tag
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
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'm putting together a WP website, and on the menu bar the active menu item is underlined. All of the menu items (li) had a padding-right set on them, but I need to take it off the active element so that the border on the bottom only extends to the end of the text. To make up for it, I need to somehow target the next li but I can't quite figure out how to do it. I'm working in the context of someone else's WP theme which is always a challenge but I think this is probably doable, I just don't know quite how to combine the CSS selectors. Here's the basic menu structure:
<nav id="top-menu">
<ul id="menu-top">
<li id="menu-item">
<a>ITEM 1</a>
</li>
<li id="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li id="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
To target the padding on the element, I have to use #top-menu ul > li#current-menu-item > a
So if I wanted to target the 3rd element in this example, what code would I use? Is this even possible, or am I trying to be too specific? I'm hoping some combination of child and descendant selectors, but I'm not sure how I can make it all work together. Thanks for your help!
Usually in situations like this I resort to a bit of jQuery. With jQuery, you can use next() to get the li after the one you've targeted.
First, you've mixed up ids and classes. You need to be using classes here (ids cannot be repeated):
<nav id="top-menu">
<ul id="menu-top">
<li class="menu-item">
<a>ITEM 1</a>
</li>
<li class="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li class="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
Then this would give you the li after the current one:
$('.current-menu-item').next()
So you could do something like add another class to it (obviously my class name is waaaayyy longer than it really needs to be!):
$('.current-menu-item').next().addClass('the-one-after-the-current-menu-item');
Which you could then style via css.
.the-one-after-the-current-menu-item { // styling here.... }
Yes, the "+" in CSS selects the element after whatever. In this case, something like this:
#current-menu-item + li {
background: red;
}
Although, you may have another problem in that you can't use spaces in IDs. If the IDs in your example were classes instead, you'd be completely fine.
as pointed out by russtuck91, that current-menu-item needs to be a class, then his answer is the one i would implement, it is the cleanest.
however if you cant change that (which you have to as you cant have spaces in id's), you can use :nth-child(x) where x is the number of child elements down:
#top-menu li:nth-child(3) a {
color:red;
}
will still recommend russtuck91's answer though