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;
}
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 have created a nice CSS menu for the app I'm working on, which is activated by using a checkbox and sibling selector.
Problem: clicking on a link doesn't close the menu (it's a single page app, so no page reloads)
Attempted solution: tried to create labels inside or around the menu links, with a "for" attribute pointing to the original menu button. This closes the menu on each link click (unchecks the checkbox), but then the link open doesn't fire.
<label for="btn">menu btn</label>
<input id="btn" type="checkbox"/>
<ul>
<li>
<a href="http://google.com/" target="_blank">
<label for="btn">link 1</label>
</a>
</li>
<li>
<a href="http://google.com/" target="_blank">
<label for="btn">link 2</label>
</a>
</li>
</ul>
<style>
/* important styles */
ul {
opacity: 0;
}
#btn:checked + ul {
opacity: 1;
}
</style>
Fiddle here:
http://jsfiddle.net/gebi/4nzLa9yh/
Any ideas?
I hope this will help, if you open link in same tab.
Menu Btn
<ul id="ul">
<li>
link 1
</li>
<li>
link 2
</li>
</ul>
<style>
ul {
display: none;
}
#ul:target {
display: block;
}
</style>
I would like to create a image and text menu in Sliverstripe as shown here:
I was thinking to have jquery select an individual ID and replace the background image. How ever Silverstripe gives me the menu as you see below. How can I go about setting up this menu?
Output
<ul>
<li class="current">
<a title="video" href="/cfl/index.php/">Home</a>
</li>
<li class="link">
<a title="alarm" href="/cfl/index.php/about-us/">About Us</a>
</li>
<li class="link">
<a title="auto" href="/cfl/index.php/contact-us/">Contact Us</a>
</li>
</ul>
Template File
<nav class="primary">
<span class="nav-open-button">²</span>
<ul>
<% loop $Menu(1) %>
<li class="$LinkingMode">$MenuTitle.XML</li>
<% end_loop %>
</ul>
</nav>
Thanks.
this should be pretty easy, in SilverStripe templates you can do anything you can do in normal HTML. With additional variables and features of course.
so, you can simply give the items a ID or a css class.
let me show you an example:
<nav class="primary">
<span class="nav-open-button">²</span>
<ul>
<% loop $Menu(1) %>
<li class="$LinkingMode position-$Pos" id="$URLSegment">$MenuTitle.XML</li>
<% end_loop %>
</ul>
</nav>
you see, I added position-$Pos which will become position-1, position-2, and so on.
also, I added an ID, in this case, it will be the URLSegment of that page.
so now you can use CSS or javascript to get that item, eg here some CSS to set a background:
.position-1 { background: green; }
.position-2 { background: yellow; }
.position-3 { background: blue; }
// we can also use the ID to style the element:
#home {
display: block;
width: 100px;
height: 100px;
background-image: url(http://placehold.it/100x100);
}
in in any javascript code you can of course do the same (in your case the framework jquery):
jQuery(document).ready(function($) {
$('.position-1').hover(function() {
alert('you moved over the first item');
});
});
however, I strongly urge you to use CSS, there is no reason for using javascript to do a simple task like setting a background image.
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
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()