I've to setup a rather weird Navigation system for a Wordpress powered site.
Here is the sample code;
<nav>
<ul>
<li>Parent Menu
<div class="dropdown">
<div class="inner-menu-item">
<dl>
<dt>Title tag for the sub-menus below</dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
<dt>Title tag for another sub-menu</dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
</dl>
</div>
</div>
</li>
<!-- similar structure as above -->
<li>Parent Menu
<div class="dropdown">
<div class="inner-menu-item">
<dl>
<dt>Title tag for the sub-menus below</dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
<dt>Title tag for another sub-menu</dt>
<dd>One</dd>
<dd>Two</dd>
<dd>Three</dd>
</dl>
</div>
</div>
</li>
</ul>
</nav>
What should be the best approach to write a Wordpress Nav code for the above setup?
It will be awesome if I can have the option to exclude some menu items too.
I'm OK with alternative methods where I have to change the CSS, I'm pretty comfortable with that. For instance wrapping inside multiple UL > LI instead of the DIV and DL > DD.
Use [wp_nav_menu]1 function to generate a menu. Using it will save you pretty much efforts and is supposed to be good practice in wordpress.
You'll have a structure pretty much like this:
<div id="menu-wrapper">
<ul id="menu">
<li id="menu-item-1">
Title
<ul class="sub-menu">
<li>Title 2</li>
<li>Title 2</li>
</ul>
</li>
</ul>
</div>
You can customize this structure by inheriting Walker_Nav_Menu and passing your new class instance to wp_nav_menu.
It's simple. Use WP menu and then assign class to the menu which has just title. Set the location to # and change cursor type for that class using CSS.
Also, div classes can be taken out and CSS properties can be given to Ul and LI inside first UL LI
IMHO the markup you have listed doesn't sound to be semantic. Instead of this you can use ul/li. Think of this from a search engine point of view, removing the CSS using web developer toolbar. You may further refer to w3c. I am writing as you have rights to modify the markup.
Wordpress is having menus option under the appearance tab, you can use that to setup herarchy. It will give you an unordered list. All that remains now is doing the CSS work.
Here is a great link that will help you get the CSS correct. Take a look at this for help on CSS.
Related
This sounds like it might be a Wordpress question, but I was told at the Worpress Exchange that it's a generic CSS question and that that's off-topic for the Wordpress Exchange site. Before someone closes this as off-topic for Stack Overflow, can you look at it long enough to determine if it's just a generic CSS question? (The theme I'm using doesn't provide support for child theme development either, so I'm out of routes to get help.)
I'm trying to change the default menu appearance (in Wordpress using the Genesis theme, but again, try to hold off the assumption this is anything beyond generic CSS before someone looks at it long enough to determine that). For instance, by default the menu shows black text on a white background. I'd like to change that to white text on a green background. I looked at the markup in my browser's developer's tools window. (The markup is at the end of this post.)
First I made these changes to the main button menus. It wasn't hard to come up with this.
li.menu-item a {
color: #fff;
background-color: #18ddb1;
}
But this didn't change the background of the sub-menus (the ones that drop down when you hover over the main menu buttons).
I tried using the above CSS with other selectors, like .sub-menu li, .sub-menu a, and a number of other combinations, but nothing changed the background color of the drop-down sub-menus. What am I doing wrong?
<nav id="genesis-nav-primary"
class="nav-primary genesis-responsive-menu">
<div class="wrap">
<ul id="menu-mine"
class="menu genesis-nav-menu menu-primary js-superfish sf-js-enabled
sf-arrows"
style="touch-action: pan-y;">
<li id="menu-item-??"
class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-??">
<a class="sf-with-ul" href="...">
<span itemprop="name"> ...menu item text... </span>
</a>
<button class="sub-menu-toggle>
</button>
<ul class="sub-menu">
<li id="menu-item-??" class="menu-item menu-item-type-post_type
menu-item-object-page menu-item-??">
<a href="...">
<span> .. menu item text .. </span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
I am new to BEM and working on a sample template:
HTML
<header class="header">
<div class="header__branding">
<h1>Site branding</h1>
</div>
<div class="header__menu">
<nav class="main-menu">
<ul class="main-menu list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="footer__links">
<ul class="???? list">
<li class="list__item">link</li>
<li class="list__item">link</li>
<li class="list__item">link</li>
</ul>
</div>
</footer>
CSS
.main-menu .list{
// styles here
}
.list__item{
// styles here
}
.list__item-link{
// styles here
}
.list__item-link--active{
// styles here
}
So my questions is, what is the best way to name lists and how best to organize the CSS? I got stuck in the footer, I added a ???? if someone can help me think of a better name for the footer links?
I am finding it hard to wrap my head around BEM, but I should not nest more than one element at a time right?
Think about BEM as reusable component that can be placed many times on site in different places.
In this case you don't need any more class in only 'list'. Both in header and footer.
If you need any modification you could use somethig like: 'list list--wider' or so. And this second class change only width of element.
And one more: list__item-link is wrong. Parent is 'list__item' so this should be named 'list__item__link' BUT you also could name it just 'anchor' or 'link' and you will be able reuse them all around site on <a> elements.
I try use after selector in my CSS code, but is not well centered.
I use Bootstrap. When I set after selector on li not a, content moves down.
This is my HTML code:
<nav class="navbar">
<div class="row">
<div class="col-md-2">
<img src="/images/logo3.png" class="img-responsive">
</div>
<div class="col-md-5">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Prices</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav navbar-nav navbar-right">
<li>Projects</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
And this is CSS code:
.navbar-nav li a::after {
content: "|" black;
}
.navbar-nav li:last-child a::after {
content: " ";
}
Here's working fiddle for you - jsFiddle -
FYI : need to expand the result section enough for your menu items to align on a single row.
PS : And I'm just hoping that you use my suggestion number 2 there ( the best would the third, but it depends on what kind of menu you need ). Using pseudo class to get those separators in your menu isn't a good practice. It could save the amount of HTML codes, but that's more like it when you use additional li between those menu items.
EXPLANATION
Your CSS was almost there, but you made a mistake.
content: "|" black;
You can't use CSS shorthand on the content attribute. And you need to give the ::after pseudo class padding-left to make it center-aligned.
Try above jsFiddle Hope this helps.
This is a comment, but I think it's the right answer so ^^
This seems very overcomplex. You should simply use display:inline on your ul's and then use padding for spacing between the list items. You can then float left and right the two individual lists respectively to get the positioning :).
Given the following html:
<ul class="nav">
<li class="level0">..</li>
<li class="level0">..</li>
<li class="level0 active">
Category Name
<ul class="level0">
<li class="level1 active">
Sub-category
<ul class="level1">
<li class="level2 active">
I only want this link styled
</li>
</ul>
</li>
</ul>
</li>
<li class="level0">..</li>
</ul>
How do I only style that nested link, considering that each parent li also has a class of 'active'? I thought I could use .nav .active:last-child > a which works in the above example, but removing the active class from that li.level2 you would expect then that the li.level1 above it would be styled, but it is not (see jsfiddle below for an example of this).
I may just be having a brainfart but I can't think of a way to target that element with only css. The only thing I can think of is to use javascript to remove the 'active' class from the parent elements, but I feel like there must be some other way.
Here is a more elaborate jsfiddle example that illustrates two test cases: http://jsfiddle.net/K4e37/
Is this possible without changing the markup and without using javascript?
Edit: I wasn't thinking about last-child correctly but here is an updated example which gets pretty close to what I want, just need to not style the higher level elements: http://jsfiddle.net/K4e37/2/
Based on other answers (here, here), the answer to your question is no. As summarized there, "last-of-type" does not work with classes and "last-child" does not work with the sub-nesting structure in your HTML. I think you'll have to change the markup or use Javascript.
List item
If you don't even have the 'level' classes, still you can target your specific html link with the below selector( if you only needs that specific link to be styled ). Please link if your requirement fulfills!
Usiong CSS:
ul.nav li ul li ul li.active a {
color: #FF0000;
}
Cheers :)
I'm creating a sidenav that has some major links that lead to a list of lesser links. A few of the lesser links are listed after the major links. Should I:
format the html like
<ul id="whatever">
<li id="child">
</li>
<li id="descendent">
</li>
</ul>
and use a ul id child selector;
or format the html like
<ul>
<li class="major">
</li>
<li class="minor">
</li>
</ul>
and use a li class selector;
or format the html like
<div class="left nav-major">
<ul>
<li>
</li>
</div>
<div class="left nav-minor">
<li>
</li>
</ul>
</div>
and use div selectors;
or do something else?
If I should do something else, what should it be?
Obviously, I'm trying to optimized load time.
CSS doesnt' really affect load time aside from how large your CSS file is.
In your examples, the first and second are exactly the same in terms of the HTML structure.
The 3rd example is not valid markup.
If you want to optimize load time, use the least amount of markup and CSS as you can.
That said, don't go overboard. There's a pragmatic middle-ground as you want to keep the markup semantic and human readable to make it maintainable.
Since a navigation list is typically a list of links, lists seem appropriate:
<ul>
<li>Main level link
<ul>
<li>Child level link</li>
</ul>
</li>
</ul>
And there'd be no need for classes, as you could reference the levels in your css as:
.navigation li {style main level links}
.navigation li li {style secondary level links}