I have a question about my menu. I have a menu with 6 items, which I want to give a different colour if they are ACTIVE (so in use by my users). I tried this already:
<nav id="sub-navigation" class="toggles-menu">
<ul id="quick-index-nav" role="navigation" class="pills slim muted">
<li>
<a id="qindex-day">abc</a>
</li>
<li>
<a id="qindex-day">random</a>
</li>
<li<? if(!$_GET['t']||$_GET['t']=='') echo ' class="active"';?>>
<a id="qindex-popular" target="right" href="right.php">all of them</a>
</li>
<li<? if($_GET['t']=='tod') echo ' class="active"';?>>
<a id="qindex-today" target="right" href="right.php?t=tod">today</a>
</li>
<li class="yesterday<? if($_GET['t']=='yes') echo ' active"';?>">
<a id="qindex-yesterday" target="right" href="right.php?t=yes">yesterday</a>
</li>
<li<? if($_GET['t']=='mix') echo ' class="active"';?>>
<a id="qindex-day" target="right" href="right.php?t=mix">samba</a>
</li>
</ul>
</nav>
CSS:
.pills>li.active>a{color:#fff}
.pills.slim>li>a{padding:3px 5px;}
.pills.muted>li>a{color:gray}
.pills.muted>li.active>a{color:#fff}
But this won't work. It makes nothing active if I click on them.
You need to add styles to your page, either via an external stylesheet or embedded in a style tag directly in the page.
CSS:
li.active a{
color: red; // for example
}
You can also use inline styles:
<li<? if(!$_GET['t']||$_GET['t']=='') echo ' style="color: red;"';?>>
It will work but is not recommended.
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
I am trying to make a sidebar button's background color change to let the visitor know which page they are currently on. I've tried searching the web for similar answers and applying them to my code but have yet been able to get it to work. I am using WordPress, CSS, & PHP/HTML if that helps any. Below is one of the buttons code:
.button-goldGrey {
color: #231f20;
border: 1px solid #231f20;
}
.button-goldGrey:hover {
background-color: #ccb086;
}
<a class="button-side button-goldGrey" href="Page1">LINK 1</a>
<a class="button-side button-goldGrey" href="Page1">LINK 1</a>
<a class="button-side button-goldGrey" href="Page1">LINK 1</a>
And I put this JSFiddle together if you prefer that: https://jsfiddle.net/zerojjc/huxznj7m/2/
As I mentioned on my comment to your question, CSS alone can't do this. You'll need some PHP to achieve this.
Assuming you can use PHP and that you can edit your theme's files, WordPress has a function called is_page() that you can use to add a new CSS class to your buttons.
For example:
CSS:
.button-goldGrey {
color: #231f20;
border: 1px solid #231f20;
}
.button-goldGrey:hover,
.button-goldGrey.current {
background-color: #ccb086;
}
PHP:
<a class="button-side button-goldGrey<?php echo (is_page('pwa-wealth-management')) ? ' current' : ''; ?>" href="Page1">PWA Wealth Management</a>
<a class="button-side button-goldGrey<?php echo (is_page('wilder-co')) ? ' current' : ''; ?>" href="Page1">Wilder & Company CPA's</a>
<a class="button-side button-goldGrey<?php echo (is_page('the-nichols-law-group')) ? ' current' : ''; ?>" href="Page1">The Nichols Law Group</a>
You can get the current page name using $_SERVER['PHP_SELF'] then you can just add proper classes in each <li> element and then later highlight the corresponding link with some CSS like the code below.
CSS code :
.button-goldGrey {
color: #231f20;
border: 1px solid #231f20;
}
.button-goldGrey:hover {
background-color: #ccb086;
}
.active {
color: red;
}
PHP + HTML code :
<?php
$activePage = $_SERVER['PHP_SELF'];
?>
<ul>
<li class="<?php ($activePage == 'Page1') ? 'active':''; ?>"><a class="button-side button-goldGrey" href="Page1">LINK 1</a></li>
<li class="<?php ($activePage == 'Page2') ? 'active':''; ?>"><a class="button-side button-goldGrey" href="Page2">LINK 1</a></li>
<li class="<?php ($activePage == 'Page3') ? 'active':''; ?>"><a class="button-side button-goldGrey" href="Page3">LINK 1</a></li>
</ul>
You can do this with just CSS3 ! Just put the CSS attribute directly into the concerned <a> element, such as:
<ul class="nav_links">
<li><a style="color: #ff6511" href="page.html">Accueil</a></li>
<li>Services</li>
<li>Tarif</li>
<li><a class="cta" href="#"><button>Contact</button></a></li>
</ul>
I have pagination like below. I would like to highlight page number 2 for both the below links.
[routerLink]="['/link/sublink2']
[routerLink]="['/link/sublink22']
How to achieve this using angular 2.
<ul class="pagination pagination-plain">
<li [routerLinkActive]="['active']">
<a [routerLink]="['/link/sublink1']">1</a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/link/sublink2']">2</a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/link/sublink3']">3</a>
</li>
</ul>
In your html,
<li [class]="addActiveClass()" >
<a [routerLink]="['/link/sublink2', '/link/sublink22']">2</a>
</li>
and in your component.ts file,
private addActiveClass() {
let fullpath:any[]=this.router.url.split("/")
if(fullpath[2] == 'sublink2' || fullpath[2] == 'sublink22'){ /* fullpath[2] has the second parameter after the '/'. If you want first parameter after the slash, use fullpath[1] */
return 'active';
}else{
return '';
}
}
This adds an active class to the li when you route to the page. You can highlight the li.active using css.
I'm having a problem with a dropdown list. Here is the HTML code I got.
Screenshot: http://i.imgur.com/zIAhQkj.png
<nav>
Hjem
<ul>
<li class="nav_link">
<a onclick="extern_link_warning()" class="dropdown_hover"
href="http://bbc.com">Innleveringer</a>
<ul class="preview_box">
<li>
<a onclick="extern_link_warning()" href="http://bbc.com">Link 1</a>
</li>
<li>
Link 2
</li>
</ul>
</li>
<li> Om meg </li>
<!-- Kun admin brukere ser disse sidene: -->
<?php
if ($isLoggedIn){
echo '<li> Admin </li>';
}
?>
</ul>
</nav>
My CSS code for the dropdown:
.preview_box {
display: none;
}
a:hover + .preview_box,.preview_box:hover {
display: block;
}
The code above works, but the problem is that I want the ".preview_box" to appear when hovering a ".nav_link" tag instead of an "a" tag, but I can't get it to work. This is what I've tried:
.nav_link:hover + .preview_box, .preview_box:hover {
}
.nav_link:hover + .nav_link .preview_box, .nav_link .preview_box:hover {
}
Any ideas how I can get this to work?
Well after reading and reading your questions I think what you want is when you hover the li with the class nav_linkyou want to appear the .preview-box instead of hovering the anchor inside it...
Well, this should fix the problem...
.nav_link:hover .preview_box {
display: block;
}
I want to select all li which not contains a tag in css:
ul.sf-menu li:not(a)
But looks like it is not working.
Need help
<ul class="sf-menu sf-js-enabled sf-shadow">
<li>
<a href="/ ">
</li>
<li> need to select this li because it is not contains a href
A
<ul style="visibility: visible; display: block">
<li>
<a href="/B-1">
</li>
<li>
B-2
</li>
</ul>
</li>
<li>
Two things
1) Your selector doesn't match the question you're asking. It currently selects every LI that is not an Anchor. This should be every LI on the page.
2) What you want can't be done with CSS right now. Your best bet would be to use some JavaScript to do this. For instance, the following jQuery would work.
$("ul.sf-menu li:not(:has(a))").doSomething()