I am creating a dynamic navigation list and I want to be able to highlight the page from that list that the user is currently browsing without having to explicitly add the style into a CSS document. For instance,
<div class="check-me">
<ul class="any-class">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
Essentially, I want to be able to replace the "any-class" with another class, one that appears on an LI element within the "any-class" UL.
<div class="check-me">
<ul class="shirts">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
I cannot append an "active" class to any LI due to limitations, so I wonder if this is possible using a wildcard CSS selector to use inside div.check-me to highlight anything that shares the same class with the UL. I hope I've been clear enough.
Related
I have a menu structure I built in HTML+CSS that I would like to incorporate into a WordPress menu, but I am new to extending the Walker class and was wondering if someone could show me an example of how it might work. The code I would like to output is below:
<!-- Menu Start -->
<nav class="collapse navbar-collapse menu">
<ul class="nav navbar-nav sf-menu">
<li><a id="current" href="front-page.php">Current Page</a></li>
<li>Top Level Menu <span class="sf-sub-indicator"><i class="fa fa-angle-down"></i></span>
<ul>
<li>Child Link</li>
</ul>
</li>
<li>Another Link No Children</li>
</ul>
</nav>
<!-- Menu End -->
The nav and ul tags wrap the entire menu and do not need repeating.
The li for a single page without any child pages just needs an anchor tag inside of a bare li, except if the page is current, and add the appropriate id to the a tag.
If there is a parent item with children, display the parent link first with a "sf-with-ul" class on the a tag, then make another ul group with its li children have the same class as well.
Could anyone point me in the right direction here on how to accomplish this? Thank you.
Unfortunately I don't have a massive amount of time to write an example right now but I can send you the article that goes into decent detail on how to create walkers in WordPress.
How to add custom HTML to wp_nav_menu?
Using this as a guide it should be possible to add classes where you want to add them and structure your menu. If not I can try and whip an example up later.
I'm building Bootstrap menu in Kentico 6 using "Universal viewer" webpart and hierarchical transformations. So far I got the structure done, but I'm not able to figure out how to add "dropdown-menu" class to a link when his parent <li> has children.
This is the code I'm generating now:
<ul class="nav navbar-nav">
<li>
Some link
<ul>...</ul>
</li>
</ul>
And I'm trying to achieve this:
<ul class="nav navbar-nav">
<li>
Some link
<ul>...</ul>
</li>
</ul>
Class and data should be added only if parent <li> has <ul> embedded inside.
Should I use macro transformation or is there a way to achieve this with ascx transformation?
If there always is a dropdown in case of some child nodes you could use NodeChildNodesCount value.
<a href="#" <%# ((int)Eval("NodeChildNodesCount") > 0) ? "class=\"dropdown-toggle\" data-toggle=\"dropdown\"" : "" %>>Some link</a>
If there are some additional conditions like document type, you need to retrieve number of child nodes for that specific conditions. You can achieve it through document API, in a helper class or directly in ASCX transformation. Look for TreeProvider class. Note that this may be performance intensive operation. I would also consider adding that those dropdown classes on the client side by javascript.
I have an unordered list that I'm using as a menu. It has a nested list in order to accommodate sub-items:
<ul class="menu" id="sub_menu">
<li class="item452">About Us</li>
<li class="item453">Leadership</li>
<li id="current" class="parent active item454">Press Room
<ul>
<li class="item455">Press Releases</li>
</ul>
</li>
<li class="item456">Community Resources</li>
<li class="item457">Careers</li>
</ul>
The nested list item is not displaying (the Press Releases item), and when I do an Inspect Element, this is what I get:
Can anyone tell my why the element.style of display:none is overriding the matched css rule of display:block?
*EDITED - !important added; no change**
Inline styles override stylesheet declarations. "element.style" shows you the current inline styles. These were probably set via JavaScript.
It must be added via javascript.
Have a look at your javascript file, and look for:
.css
or
.style
It should be one of the above that is modifying the element and therefore overwriting your CSS.
Here's the jQueryTools demo page on how to use their tooltips: http://flowplayer.org/tools/demos/tooltip/any-html.html
Basically, if you want to have a tooltip that contains HTML, you have to put that HTML in a div and place it directly after the trigger element like so:
<a href="http://www.stackoverflow.com" id="link1">
<div class="tooltip">
<img src="img/SOicon.png">stack<span style="font-weight:bold">overflow</span>
</div>
But my trigger element isn't <a href="http://www.stackoverflow.com" id="link1">. It's an <li>, and my guess is that I can't put anything other than an <li> in the parent <ul>. In other words, I can't place the after the trigger element like I'm supposed to.
I've come up with a way to fix this (scrapping the unordered list with floated <li>s and switching over to floated divs) but figured I should probably consult the experts (you guys, of course!) before I got started on fixing the problem.
How would you guys fix this?
It's no problem to use another element outside your structure as tooltip target !
<ul id="mylist">
<li title="List Point 1">List Point 1</li>
<li title="List Point 2">List Point 2</li>
<li title="List Point 3">List Point 3</li>
</ul>
<!-- many other HTML ELements -->
<div id="mylist_tooltip"></div>
At the end put in your jQuery's ready() :
jQuery("#mylist li").tooltip({
// target div
tip: '#mylist_tooltip'
});
Read more in the docu ;-)
I have Firebug and IE Web Developers' toolbars installed on my machine, and they are very helpful for investigating CSS classes, DIVs, etc. My problem is that I'm working in Wordpress (custom Genesis theme) and I need to know the exact syntax of CSS class when it is nested rather deep. Yes, I can look at the code and see the code, but I'm not able to derive the CSS class sucessfully.
For example:
<div
id="inner">
<div
id="content-sidebar-wrap">
<div
id="sidebar-alt"
class="sidebar
widget-area">
<div
id="menu-pages-7"
class="widget
menupages"> <div
class="widget-wrap">
<ul
class="nav">
<li class="page_item
page-item-12 current_page_ancestor
current_page_parent">
<a
href="http://mywebsite.org/wordpress/about-us/"
title="About Us">About
Us</a> <ul
class="children">
<li class="page_item
page-item-117
current_page_item">
<a
href="http://mywebsite.org/wordpress/about-us/contact-us/"
title="Contact
Us">Contact Us</a>
</li>
I want the parent to have different formatting than the child item, but
#sidebar-alt .nav li {
border-bottom: 0px dashed #003893;
}
doesn't make anything happen th way I want it to.
Yes, I realize that I need to learn my CSS better, but there are so many nestings, I would simply love to have a browser tool that would allow me to click on a portion of the page and it would tell me the class that bit of text is and how the class should read in the CSS. When I use Inspect in Firebug, I get a number of different existing classes that apply, but not necessarily that exact class that I could add to the style sheet to customize.
Any help would be greatly appreciated.
Maybe this would work:
http://www.downcase.com/project/firequark