I have a menu that will be automatically created in an asp.net page. I'm trying to use a pure CSS cross browser menu but how can i set it so that each subsequent child is autohiden/shown w/o having to define the style for each level of the menu.
Is this the only way to accomplish this with css?
Essentially im looking for a way to use css to show/hide the child menu items w/o having to define the style for every level - especially since i dont know how many levels there will be.
you should be able to do it by only specifying down to the second level
<html>
<head>
<style>
.mnusub li ul{ display:none; }
.mnusub li:hover > ul{ display: block; }
</style>
</head>
<body>
<ul class="mnusub">
<li>test1
<ul class="mnusub">
<li>test2</li>
<li>test11
<ul class="mnusub">
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</li>
</ul>
</li>
<li>test5
<ul class="mnusub">
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
</li>
<li>test9</li>
<li>test10</li>
</ul>
</body>
</html>
The key here is the ">" selector as it specifies direct descendants and not sub-descendants
enjoy
When you want to affect each child individually, but without having to make style rules for each of those children, then you need more logic, which CSS doesn't provide. You could use something like PHP for that logic, or you could go with Javascript/jQuery. In that case, you can toggle CSS classes on child[x] through jQuery, and you only need to style those classes. Then it wouldn't matter which child got the class, it would be styled accordingly. Note that you should first make sure your menu is at least usable without Javascript, so users aren't dependent upon it.
Related
Logic escapes me for two days on what I'm trying to achieve, which is targeting certain class elements in the wordpress menu with CSS. It is usually simple really for me, but something (small usually) is making me battle.
I need to apply a small background image behind the menu item text to the "active" or "current" menu item. But this must apply ONLY to the parent menu items (not on any of the child/submenu dropdown items). Applying the background image is fine, so that's not the issue. It's targeting only on the parent item that's the issue.
I've tried variations of the following CSS (forgot about the background image for now, I'm keeping it simple here, to resolve the targeting) to make the current/active PARENT menu item text turn red:
.main-navigation div ul li.current-menu-parent a:not(.sub-menu)
{color: red !important;}
(I have commented out this custom CSS on the website, to prevent confusion)
The :not pseudo I thought would do the trick but it's possibly my failure at syntax, even though I googled it, to which I may learn something further about CSS today, when resolved.
It's not working how I expect it to. Any ideas? I might revert back here again if I battle with the background image, but I suspect once the 'CSS targeting' is worked out, that shouldn't be an issue to apply.
Thank you brainy people :)
The answer is more simple than you think: use the > CSS selector. See articles here and here.
For example:
Codepen
/* Target top level only */
.my_navigation > li > a {
background-color: yellow;
}
/* Or perhaps target only top-level with children */
.my_navigation > .has_children > a {
background-color: orange;
}
<div>
<h1>Only top-level parents get styled:</h1>
<ul class="my_navigation">
<li>Link 1</li>
<li class="current_link has_children">
Link 2
<ul>
<li>Link 2a</li>
<li class="current_link has_children">Link 2b
<ul>
<li>Link I</li>
<li>Link II</li>
</ul>
</li>
<li>Link 2c</li>
<li>Link 2d</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Link 3a</li>
<li>Link 3b</li>
</ul>
</li>
<li><a href="#">Link 4</li>
</ul>
</div>
Using Javascript (e.g. jQuery) is overkill in this case. It would be a different story if you're using an eventlistener and need to get the parent of the clicked target; in that case you DO need JS because as others have mentioned CSS doesn't yet have a parent selector yet (but it seems like it's coming in CSS4).
However here you just need to style items on page rendering, and WP provides plethora of classes to work with. Also: Do a Google search for "wordpress menu class walker function" and you can generate some more classes, like identify each level of menu e.g. ".top-level", ".second-level", etc.
try below, this will select the a tag which is direct child of li.current-menu-parent.
.main-navigation div ul li.current-menu-parent > a{color: red !important;}
Seems jQuery was the way to go for the solution, based on the thread Is there a CSS parent selector? posted by #Paulie_D, thank you!
My jQuery solution below targeting only the active parent menu item and inserting a small background image on the <li> menu tag. You can see the yellow 'paint swish' image happening in the screenshot below.
The .not is used to exclude targeting the dropdown submenu items (their class is .sub-menu):
$('.main-navigation .current-menu-item, .main-navigation .current-menu-parent').not('.sub-menu li').css(
{
'background-image':'url(PATH TO YOUR IMAGE HERE)',
'background-size': '100% 50px',
'background-repeat': 'no-repeat',
'background-position': 'center'
}
);
Thanks for your input. I learnt something today.
Suppose I have some styled list:
<ul>
<li>...</li>
<li>...</li>
...
</ul>
Now I want to encapsulate each <li> item into separate component. Doing that, we get something like this in a resulting DOM:
<ul>
<my-item><li>...</li></my-item>
<my-item><li>...</li></my-item>
...
</ul>
The problem is, it breaks styling. We will get wrong margins between items, wrong borders etc. And if we use external CSS, the problem becomes nasty.
So, is there a way to apply <li> styles directly to <my-item> without editing external CSS file? In AngularJS there is a replace option for directives, but in Angular it doesn't exist afaik.
Angular2 answer
As #enguerranws mentioned use an attribute selector for your component instead of a tag selector
#Component(selector: '[myLi]', ...
//#Component(selector: '[my-li]', ...
and use it like
<li myLi>...
<!-- <li my-li>... -->
Angular2 doesn't have the replace option and it's also deprecated in Angular 1.x since a while.
To allow users of your <my-li> to pass custom content add a <ng-content></ng-content> tag to the template (you can add custom content before and after the <ng-content> tag that should appear for each <my-li> element.
#Component(
selector: '[myLi]', // '[my-li]',
template: '<ng-content></ng-content>'
...)
Kinda Late but what about using the following solution
<ul>
<my-item class='myLi'>...</my-item> <!-- or -->
<my-item [ngClass.myLi]='isList'>...</my-item>
...
</ul>
and on your css:
.myLi {
display: list-item;
// and everything else you've styled your li
}
I have this menu:
<div id="menu-home">
<ul>
<li> a </li>
</ul>
</div>
When I am on the test.php page that corresponds to test menu, I need it's li to have a different style..
I tried
#menu-home ul li:active
but it didn't work..
Thanks
There is no :active state for <li>
Instead you can do it with PHP.
<div id="menu-home">
<ul>
<li <?php if (page is current page) echo ' class="active"';?>> a </li>
</ul>
</div>
And in the CSS, you can give this:
#menu-home ul li.active {}
The <li> element does not have an active state, since it is just meant to be a (stateless) bullet point. The selector :active can only be used on a link; an example can be found here.
However, :active will only highlight the link as it is clicked. After that, it performs whatever action and/or navigation it is set to do and then the link will be visited. From there on you can't tell it apart from the other already visited pages that you are not currently viewing and it does not become "unvisited" again, even if you navigate to another page. So this does not do what you intend.
Instead, I would create a class .active in your CSS where you can define all your custom styling. Then, the PHP that generates your pages needs to take care of setting the class correctly on the selected menu item, ie.: attach class="active" it either to the <li> or the <a> whenever the menu is build.
(yeah, just see Praveen's answer for the code ^^)
In my head, I've always known to use classes over inline styles for any project. But are there any effective differences between the two?
First of all:
If the HTML is built or generated independent of the overall site design (e.g. shared template code), then add reasonably-named classes and IDs, linked exclusively to external stylesheet(s). Use sufficient elements to allow for arbitrary CSS manipulation. For example, see the CSS Zen Garden. This applies to ALL CMSes, programs, scripts, and other dynamically-generated site content. The HTML output must contain absolutely no styling or layout of any sort at all. No exceptions.
Assuming you're dealing with static content, then:
If there's any way you can reuse the style, make it a class and link to a stylesheet.
If there's no way would ever reuse the style (it's a one-off thing that doesn't make sense anywhere else) then use a <style> block that references the element's #id.
If the CSS attribute only makes sense in the context of the surrounding HTML (e.g. some usages of clear:) then I inline the style into the element.
A lot of people call this heresy, just like a lot of people denounce any use of goto in modern programming languages.
However, rather than subscribing to stylistic dogma, my view is you should choose the method based on your circumstances that decreases your overall workload the most. Stylesheets add a level of indirection that makes site-level changes easy and helps build consistency. But if you have several dozen classes on each page that are only used in one place, then you're actually increasing your workload, not decreasing it.
In other words, don't do something dumb and confusing just because people tell you it's the right way to do it.
There is a simple reason. The point of CSS is to separate the content (HTML) from the presentation (CSS). It's all about accessibility and code reuse.
If the choice was there, my first preference will be classes/other selectors. However, there are situations where inline styles are the only way to go. In other situations, just a CSS class by itself requires too much work, and other types of CSS selectors make more sense there.
Suppose you had to zebra stripe a given list or table. Instead of applying a particular class to each alternate element or row, you could simply use selectors to do the job. That will keep the code simple, but it won't be using CSS classes. To illustrate the three ways:
Using only class
.alternate {
background-color: #CCC;
}
<ul>
<li>first</li>
<li class="alternate">second</li>
<li>third</li>
<li class="alternate">fourth</li>
</ul>
Using class + structural selectors
.striped :nth-child(2n) {
background-color: #CCC;
}
<ul class="striped">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
Using inline styles
<ul>
<li>first</li>
<li style="background-color: #CCC">second</li>
<li>third</li>
<li style="background-color: #CCC">fourth</li>
</ul>
The second way looks the most portable and encapsulated to me. To add or remove stripes from any given container element, simply add or remove the striped class.
However, there are cases where inline styles not only make sense, but are the only way to go. When the set of possible values is huge, it will be stupid to try to make classes in advance for each possible state. For example, a UI that allows the user to dynamically place certain items anywhere on the screen by dragging. The item will have to be positioned absolutely or relatively with actual coordinates such as:
<div style="position: absolute; top: 20px; left: 49px;">..</div>
Surely, we could use classes for each possible position the div can take, but that's not recommended. And one can easily see why:
.pos_20_49 {
top: 20px;
left: 49px;
}
.pos_20_50 {
top: 20px;
left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px
<div class="pos_20_49">..</div>
Use common sense.
Everyone knows that presentation and content should, in an ideal world, be separated. Everyone also knows that this doesn't work very well a lot of the time. We all know that you're supposed to use divs rather than tables for layout, but we also know that for any circumstance where you don't have full control over the content it just doesn't work properly.
Downloading a 500k style sheet to style one element because you've taken every possible style and stuck it in a style sheet will kill your page, downloading 500 smaller style sheets to style your page because you need them all will also kill your page.
Reuse is great in concept, but the reality is that it's only useful in certain contexts. This applies equally to pretty much anywhere the concept exists. If your project does what you want it to do, does so in every reasonable browser, does so in an efficient way, and does so reliably, then you're good to go, it's not dramatically harder to refactor css than is is code.
I can't think of any pros for inline styles.
CSS is all about Progressive Enhancement, and not repeating yourself (DRY).
With stylesheets, Changing the look becomes as easy as changing one line in the HTML code. Make a mistake or the client doesn't like the change? revert to the old stylesheet.
Other advantages:
Your site can automagically adjust to different media, such as for printout and for hand-held devices.
Conditionally-included CSS fixes, for that gawd-awful browser-that-shall-not-be-named, become a snap.
Your users can easily customize the site with plugins like Stylish.
You can more easily reuse or share code from site to site.
I can think of only two situations where inline styles are appropriate and/or reasonable.
If inline styles are programmatically applied. For example, showing and hiding elements with JavaScript, or applying content specific styles when rendering a page (see #2).
If inline styles complete a class definition for a single element in cases where id's are neither appropriate or reasonable. For example, setting the background-image of a element for a single image in a gallery:
HTML
<div id="gallery">
<div class="image" style="background-image:url(...)">...</div>
<div class="image" style="background-image:url(...)">...</div>
<div class="image" style="background-image:url(...)">...</div>
</div>
CSS
#gallery .image {
background: none center center;
}
With the addition of Custom properties to CSS, now there's another use case. One might want to use inline style to set custom properties.
For e.g. below i am using CSS grid to align HTML Lists and Div blocks and i wish to have flexibility in the HTML (Just the way BootStrap or any other framework provides) as this HTML is dynamically generated by application.
CSS :
:root{
--grid-col : 12;
--grid-col-gap:1em;
--grid-row-gap:1em;
--grid-col-span:1;
--grid-row-span:1;
--grid-cell-bg:lightgray;
}
.grid{
display: grid;
grid-template-columns: repeat(var(--grid-col), 1fr);
column-gap: var(--grid-col-gap);
row-gap: var(--grid-row-gap);
}
.grid-item{
grid-column-end: span var(--grid-col-span);
grid-row-end: span var(--grid-row-span);
background: var(--grid-cell-bg);
}
HTML :
<ul class="grid" style="--grid-col:4">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
<li class="grid-item">Item 5</li>
<li class="grid-item">Item 6</li>
<li class="grid-item">Item 7</li>
<li class="grid-item">Item 8</li>
</ul>
In the above HTML to change the four columns to 3 i change the custom property using style attribute :
<ul class="grid" style="--grid-col:3">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
<li class="grid-item">Item 5</li>
<li class="grid-item">Item 6</li>
<li class="grid-item">Item 7</li>
<li class="grid-item">Item 8</li>
</ul>
You can check the extended live example at https://codepen.io/anon/pen/KJWoqw
Assuming that you are using external stylesheets, an additional benefit on top of those previously mentioned is caching. The browser will download and cache your stylesheet once, and then use the local copy each additional time it is referenced. This allows your markup to be more compact. Less markup to transfer and parse means a more responsive feel and better experience for your users.
Classes are the re-usable styles that can be added to HTML elements. e.g-
<style>
.blue-text{color:Blue;}
</style>
you can use and re-use this blue-text class to any HTML element
Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.
whereas inline style are like e.g-
<p style="color:Blue;">---</p>
So the difference between both is you can re-use classes whereas you can't re-use inline styles.
Inline Styles are definitely the way to go. Just look at http://www.csszengarden.com/ - that would never have been possible with classes and external style sheets...
or wait...
I'm using SIFR 3.0 in combination with suckerfish popup menus. I only want to SIFR the top level li's and not apply the effect to the nested ones. I'm also using WordPress, so restructuring the menu, like wrapping the parent in a <div> or other object is too hard (I'm still figuring out the basics of WordPress).
Is there a way to turn SIFR
ON for ul#menu li
but OFF for ul#menu li li ?
Other things I've tried that haven't worked is applying a class or id to the parent <li class="top-level"> or <li id="top-level">--that didn't stop the SIFR, it still grabbed the children.
Thanks so much for the help.
I'm going to assume your HTML structure is like this:
<ul id="menu">
<li>
My link
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
When you replace ul#menu li, you will replace the entire content of the <li> element. Unfortunately this also includes the submenu. The solution is to replace just the link, but note that you can't directly replace <a> elements.
Therefore:
<ul id="menu">
<li>
<span>My link</span>
<ul>
<li>My submenu item</li>
</ul>
</li>
</ul>
And replace ul#menu > li span.
Finally there is the question whether the Suckerfish menus actually work if the events have to come through sIFR. I suspect it won't, meaning you're probably better off not using sIFR here.
This can be done with the CSS child selector:
ul#menu > li
this will only select li elements that are direct children of ul#menu. This should work in all standards complient browsers, and IE7+.
For IE6 there are a few hacks you can do to fake it, although I prefer to use jQuery to make up for selectors it doesn't support:
$('ul#menu > li').css({ ... });
which you can place in conditional comments.
If you download the uncompressed sifr source, and also have jQuery or are good with javascript you can probably put a conditional in at around line 491 of the sifr code along the lines of
if ($(node).parent().parent().parent().attr('id', 'menu')) {continue;}
I'm not great at jQuery, and I'm also not sure what kind of object the nodes that sifr runs through are, but in theory something like the above should make waht you want possible.