I'm trying to implement a responsive jQuery navigation but I need to extend the default output of the WP menu. I need to wrap any pages that have children with a span and remove the link. For example:
<nav id="menu-right">
<ul>
<li>
<span>Friends</span>
<ul>
<li>Alexa</li>
<li>Alexander</li>
<li>Fred</li>
<li>James</li>
<li>Jefferson</li>
<li>Jordan</li>
<li>Kim</li>
<li>Meagan</li>
<li>Melissa</li>
<li>Nicole</li>
<li>Samantha</li>
<li>Scott</li>
</ul>
</li>
<li>
<span>Family</span>
<ul>
<li>Adam</li>
<li>Ben</li>
<li>Bruce</li>
<li>Eddie</li>
<li>Jack</li>
<li>John</li>
<li>Martina</li>
<li>Matthew</li>
<li>Olivia</li>
<li>Owen</li>
</ul>
</li>
<li>
<span>Work colleagues</span>
<ul>
<li>David</li>
<li>Dennis</li>
<li>Eliza</li>
<li>Larry</li>
<li>Lisa</li>
<li>Michael</li>
<li>Rachelle</li>
<li>Rick</li>
</ul>
</li>
</ul>
</nav>
Any ideas?
Related
I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
So, i want to make an active links in navbar, but it's working only on "Pocetna" page, but not on others...this is what i've done:
<nav>
<ul>
<li class="active">Pocetna</li>
<li>Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
and this is in my style.css :
nav li.active{
color: #CCCCCC;
}
I'm using bootstrap...
Did you create a HTML-file for each of your navlinks?
If you did, please do the following:
1. Go to your 'Forum' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li class="active">Forum</li>
<li>Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
2. Then go to your 'Galerija' HTML index file, and change the Navbar to:
<nav>
<ul>
<li>Pocetna</li>
<li>Forum</li>
<li class="active">Galerija</li>
<li>Donacije</li>
<li>O nama</li>
</ul>
</nav>
Do you understand where I'm going with this? You only need to add the class="active" to your active HTML index file.
Don't touch the CSS unless you wish to change the active color of your Navbar links.
Okay so for Angular components the "restrict" and "replace" options are not present. I'm generally fine with this, but now I have the following code:
<ul class="dropdown-menu dropdown dropdown-menu-left"
aria-labelledby="dropdownMenu">
<some-component></some-component>
<li role="separator"
class="divider"></li>
<li><a> Block </a></li>
</ul>
where the <some-component></some-component> has a bunch of other <li> elements inside. But since the bootstrap css only works if the <li> is a direct child of the <ul>, the list-elements from some-component don't get styled. Any ideas what I could do as a workaround?
I have an html menu listing that look like this:
<ul id="navlist" class="clearfix">
<li class="home"></li>
<li class="xo">About Us</li>
<li class="xoxo">People</li>
<li class="xoxoxo">Business</li>
<li class="xo">News</li>
<li class="xoxo">Careers</li>
<li class="xoxoxo">Gallery</li>
<li class="xi">Contact Us</li>
</ul>
My challenge is ensuring the CMSListMenu apply the different classes to each li.
The li could styled each by using Edit > Document Properties > Navigation tab provided in portal engine.
It exposed the css styling of each page li. You can set the link, mouseover and current page classes.
I want to keep hover color on parent list, when child list is hovered.
Here's example where second menu has submenus and when you hover over submenus, color of main menu is gone.
http://jsfiddle.net/ya8ga/
Thanks
HTML
<div id="menu2">
<ul>
<li class="l1">Home</li>
<li class="l2 dropDown">Hotel
<ul class="sub1">
<li class="l1">Hotel Sub 1</li>
<li class="l2">Hotel Sub 2
</li>
</ul>
change this:
#menu2 li a:hover{background:#89E00C; color:#2D1C13;}
to this:
#menu2 li:hover{background:#89E00C; color:#2D1C13;}