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)
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 a links navigation that drops down on hover (which works fine) then slides right on hover of the li ul li element.
HTML:
<div id="main-links">
<div id="main-links-content">
<ul class="topnav">
<li><a class="link active" href="index.php">Aberdeen Taxis</a></li>
<li><a class="link" href="#!">About Us</a>
<ul class="dropdown">
<li>Who are we?
<ul>
<li>Meet the team</li>
</ul>
</li>
<li>Why use us?
<ul>
<li>Health & Safety Policy</li>
</ul>
</li>
<li>Our commitment to the environment
<ul>
<li>Environmental Policy</li>
</ul>
</li>
</ul>
</li>
<li><a class="link" href="#!">Our Services</a></li>
<li><a class="link" href="#!">Our Tours</a></li>
<li><a class="link" href="#!">Our Fares</a></li>
<li>Online Booking
<ul class="dropdown">
<li>Cash Booking</li>
<li>Account Booking</li>
<li>Credit Card Booking
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li><a class="link" href="#!">Contact Details</a></li>
</ul>
</div>
</div>
The JSFiddle link: http://jsfiddle.net/mrnaysilva/3Ucd4/
I believe the problem is here (but I may be wrong):-
#main-links-content ul ul ul {
left: 100%;
position: absolute;
top: 80px;
width: 180px;
max-width: 200px;
}
Basically I have set a width and top position. What I want to happen is that the width is set to auto, but when I set this to auto it doesn't set a width according to the paragraph text that's inside it. Also, because I have set a top position, it is always displaying the side menu on the bottom li, where as I want this to display to the right of the li element that is hovered.
i.e. If I hover over About Us and then hover over Who are we?.. Meet the team should display to the right of Who are we?.
I'm just unsure how I can achieve this.
The problem
The main problem that isn't working is the position: relative; of the sub <li> elements.
This is because you use display: table-row;
As stated in the specs:
The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined.
source: http://www.w3.org/TR/CSS2/visuren.html#propdef-position
How to solve this?
Well you can just use an element inside the table-row that will have the position: relative; property:
<li>
<div class="dropdownWrap">
Our commitment to the environment
<ul>
<li>
Environmental Policy
</li>
</ul>
</div>
</li>
Where the css of the .dopdownWrap is:
.dropdownWrap
{
width: 100%;
height: 100%;
position: relative;
}
jsFiddle
Note that i only did this with the "About us" tab.
Some notes about the javascript
You can just find the direct child element with the > selector. This way you don't have to exclude elements with the .not() function. More info here
Instead of defining .slideUp() and .slideDown() seperately, you can define them in one line ( this is because your speed of the animation is the same) with slideToggle.
Some notes about the css + html
If you're assigning classes and IDs to your elements you might as well use them in your css. For example: you never call the class .dropdown in your css. There are more of these IDs and classes that are never used.
Hope this helped you!
Edit
The jQuery UI function slide will function as this, because it will only play the mouseout function when the mousein function has completed. Normally you could cancel the previous animation with .stop(). But seems that jQuery UI slide doesn't support this. So i suggest you to just use plain jQuery for this:
$("#main-links-content li ul li").hover(function () {
$(this).find(' > div > ul').stop(true).animate({left: "100%"}, 300)
}, function () {
$(this).find(' > div > ul').stop(true).animate({left: ""}, 300);
});
Here a great article for this: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
I also added the .stop() function to the dropdown menu to fix any delay bugs.
jsFiddle
You may want to look at css transition, as it basically acts the same as you did now.
Here an css transition example: jsFiddle
The first slideToggle is not done in css as it easier and 'better' in jQuery(With css there wouldn't be a dynamic height, which would result in delay in animation).
I am trying to define two menu's in my header using the bootmetro framework. The first is my main menu and the second is my user menu.
For some reason the menu is visualized wrong the second time, the line space of the menu items are too large.
The code used to create a menu looks something like this
<div class="dropdown">
<a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
Actions
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li class="divider"></li>
<li>item4</li>
</ul>
</div>
The problem I run in to is shown in the screenshots below. In my second menu the menu item does not take the full with of the menu.
UPDATE:
The problem seems to be in the bootmetro CSS stylesheet and firebug narrows the search a bit (thanks Thanh Trung!). In inspect mode I can clearly see that the a href does not fill the menu item (li) in my second menu, while it does take the max width in my first menu.
The part in the bootmetro CSS looks like this:
.dropdown-menu li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 20px;
color: #333333;
white-space: nowrap;
}
Additional question: What does this '>' cause? I have never seen that before.
In both menus the CSS class "dropdown-menu" is used, BUT, when I remove the body of this CSS class only the first menu changes accordingly.
Main question: So why is this class not properly inherited by me second menu item?
For completeness again the HTML code for the second menu (the menu that shows the artifact):
<div class="dropdown pull-left">
<a class="header-dropdown dropdown-toggle pull-right" data-toggle="dropdown" href="#">
<b class="icon-settings"></b>
</a>
<ul class="dropdown-menu pull-right">
<li>Settings</li>
<li>Settings</li>
<li>Settings</li>
<li class="divider"></li>
<li>Log out</li>
</ul>
</div>
Correctly visualized menu
Wrongly visualized menu
Inspection: the "a" is not taking the full width
Inspection: the list item is taking the full width
Because the code is identical, but there are difference when displaying, it means that the css is affecting it. Without given us the css, it's impossible to tell what is the problem.
Here are css properties that could affect the total height of an element: height, line-height, padding, margin.
You can use Firebug or Chrome inspector to inspect an element to see its styles
UPDATE
bootmetro.css line 2018 is affecting (overriding) it
#top-info a {
display: inline-block;
height: 46px; /**** should be removed or override *****/
color: #5A5A5A;
}
Also I suggest you to use Firebug (an addon of firefox) to inspect elements, dont use the inspector of Firefox
I use markup to display a dropdown menu using Twitter Bootstrap.
<ul class="nav pull-right">
<li class="dropdown">
Menu <b class="caret"></b>
<ul class="dropdown-menu">
<li>Menu item 1...</li>
<li class="divider"></li>
<li>Menu item 2...</li>
<li>Menu item 3</li>
</ul>
</li>
</ul>
I want to be able to make menu items appear disabled, i.e. no hover effect and probably a different text decoration to make the disabled state visible to the user.
What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <li> or <a> element?
When outputing the code for a disabled drop down, why not simply use :
<li class='disabled'>
Menu
</li>
You can always add the caret back if you still want it to appear.
Update:
Adding W3Schools Link
You can attach a custom disabled class to your menu link a tag that you want to disable and simply remove the default action by using preventDefault and targetting that class, like so:
$(".disabled-link").click(function(event) {
event.preventDefault();
});
Then you can style all events from the .disabled-link with a grey backdrop or any style you like;
CSS
a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
background-color:#d9d9d9 !important;
color:#aaa !important;
}
Demo
I prefer this (LESS):
/* Disable link */
a.disabled,
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {
color: #999 ;
cursor: default;
}
.dropdown-menu {
a.disabled,
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {
color: #999 ;
cursor: default;
background-color: white;
}
}
To disable the the dropdown use:
$('.dropdown-toggle').addClass('disabled');
To enable it back:
$('.dropdown-toggle').removeClass('disabled');
YES, Bootstrap has a predefined class with all necessary styling you need. You can simply add disabled class to whichever <li> you want
Just to add to Andres answer (don't have enough reputation to add comments :( ). You need to return false from the event handler or it might continue executing other handlers.
$(".disabled-link").click(function(event) {
event.preventDefault();
return false;
});
Similar to above you can use:
li.disabled > a {
color:#aaa !important;
}
This way you are keeping the same bootstrap default class for disabled links and implement the preventDefault() Javascript to disabled the link.
$(".disabled").click(function(event) {
event.preventDefault();
return false;
});
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
**<a class="dropdown-item disabled" href="#">Disabled link</a>**
<a class="dropdown-item" href="#">Another link</a>
</div>
Add .disabled to items in the dropdown to style them as disabled.
Source: www.getbootstrap.com
Linking a background image with CSS is giving me so me issues. They seem pretty simple but I can't quite get around them:
I have list items for my main menu:
<div id="menuContainer">
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students">Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors">Visitors</li>
</ul>
my css sets the li to inline-block and gives defines the id's with a size and background image accordingly. I had to use zoom: 1; and *display: inline; for IE to work and everything shows up fine in IE for that now.
When I use text-indent: -9999px; to remove the text and leave the image, Chrome and Firefox works fine with this. However, in IE the whole li shifts the number of pixels listed.
Finally, In Chrome the entire image is the link, in IE and Firefox only the text is the link so with no text the menu has no function.
Any ideas?
You are using syntactically incorrect HTML. You can't wrap an <a> around a <li>. While fixing this may not necessarily make your problem go away, it will probably ensure that every browser behaves the same way.
You're not very clear about what you want to achieve, and what your menu looks like. If you want the whole area of the <li> to become clickable, you're probably best off giving the <a> a display: inline-block and fixed dimensions.
If you need more detailed answers, you may want to give us an online example.
First well form the html, then try your css again.
<ul id="menu">
<li id="home" title="Home" alt="Home">Home</li>
<li id="current" title="Current Students" alt="Current Students"> Current Students</li>
<li id="prospective" title="Prospective Students" alt="Prospective Students">Prospective Students</li>
<li id="facultyStaff" title="Faculty & Staff" alt="Faculty & Staff">Faculty & Staff</li>
<li id="visitors" title="Visitors" alt="Visitors"> Visitors</li>
</ul>
it's better to use line-height instead of text-indent. you need to use image replacement technique. like this
<ul id="menu">
<li><span>Home</span></li>
</ul>
and CSS
ul#menu li a { width: 100px; height: 20px; background: url(../images/myimage.gif) no-repeat 0 0; }
ul#menu li span { line-height: 200px; display: block; }