I have a bunch of elements on a page that when hovered show a menu. Because hovering requires to be on the element and if you are right at the border it gets very tricky to activate them iIwas wondering if there is a way to activate the hover menu when the mouse is close to the element, let's say at a tolerance rate of 10 pixels from any border (N,S,E,W).
Tracking the mouse on the page is really not an option, too much processing needed on the client side and the page is already loaded with lots of javascript code.
I think wrapping the menu item content with a div / span element and then applying the hover styles to that would work best. And then as Sime said, increase the padding on the menu item.
For example the html would be:
<ul class="menu">
<li><span>content here</span></li>
</ul>
Then the CSS would be something like:
li {
padding:10px;
}
li:hover span {
/* Hover style of menu item here */
}
Related
I have a very simple page with the standard bootstrap nav which collapses when on small screen. Right below the nav I have a div which I do not want to show if the li has CSS class dropdown open. Is it possible to do this via CSS only or do I have to go down the jQuery/Javascript route?
.navbar-nav > li.dropdown.open {
/*How can I hide the div class="inner-details" here*/
}
If the dropdown element is not wrapped with another one, you could possibly use the adjecent sibling selector like this:
li.dropdown.open + .inner-details {
display: none;
}
Otherwise you could do tricks with negative margin and z-index, effectively sliding content from below the dropdown behind it, but really this will lead to messy layout.
There's no evil in using JavaScript. Bootstrap itself uses it for the navigation if I remember correctly.
I'm working with a CMS that only allows links in the navigation. There is one instance where I have a submenu but there is no page attached. See below.
menu1
submenu
item1
item2
menu2
menu3
All three top level items (menu 1,2,3) must be clickable + hover. "Submenu" can't be clickable but the user needs to hover in order to view item1 and item2.
This of course wouldn't be an issue if not for the restrictions in the CMS. If I add the following CSS then I can't click OR hover.
.subMenu {
pointer-events: none;
cursor: default;
}
Try My unclickable but hoverable link. Indicating only the "#" as a link should do the trick if your CMS doesn't allow you to specify onclick attributes.
I have a header but I am stuck at 2 things.
How do I get it all positioned properly? What I want is it to be positioned as a header with a navbar at the bottom of it, then in that navbar I want a div that I can make slide around and I want x amount of tabs.
How would I make the div slide left/right using JavaScript/JQuery? Sorry if it doesn't make sense.
My code is:
<body>
<div class="header">
<div id="topHeader"> </div>
<div class="navBar">
//buttons/text here
<div id="slider"> </div>
</div>
</div>
</body>
I have tried using positioning (absolute/relative) but when I make the navBar relative it doesn't stay at the bottom but if I make both it and the slider absolute, the slider doesn't stay in the navBar. Is there any other way to accomplish it?
I am not able to understand how to make it work. However, here it goes.
The css for header would be:
.header {
display: block; // for that overall div..
}
Then you are having a top header, that would be more like a top header under which you want the nav bar. Ok for that you said you want it to be as header. Then just write it the way it is! And it will be used as a header, I mean just add some margins and paddings so that it has some distance from other objects.
#topHeader {
margin: 5px; // overall 5px pixel for all sides.
padding: 2px; // 2 pixel padding..
}
The nav bar, was the one with may buttons and texts that you will be using as hyperlinks to other pages. Right? So try using something like this:
<ul>
<li>First text</li>
<li>Second text</li>
<li>Third text</li>
</ul>
Now, show them all in a line. Because you wanted them in line, the list items will be shown in a line instead of being shown under each other as default. The x tabs will be the amount of the li used in the list, and it will show all the buttons or what ever you were trying to show. To do that the CSS is:
li {
display: inline;
}
To remove the bullet style, use this:
ul {
list-style: none;
}
This way the navbar will be shown in a line as other websites show.
Second question:
The sliders slide with the help of mouse, not jQuery (Just kidding). You can use scroll bars buddy, jQuery is used to scroll or slide, but that hides once slided. You will be able to see it but when it will scroll back it will hide, and go out of the page untill you slide it back again. You can just stick to the scroll bars to scroll or slide.
That's all!
jQuery slider:
From jQuery API if you check the slide() you will find out, that any event on any element would cause a slide (that will slide the element up and down) in some element.
Here would be an example:
$(document).ready(function () {
$("#slider").click(function () {
$(".navBar").slideToggle(1000); // the time consumed is 1 sec = 1000 milliseconds.
}
});
You can see, that a click on the element with id="slider" would slide the element with class="navBar" and the slide will consume the time of 1 second.
Advice or Suggestion:
I would like to advise you to first learn the basics about the codes that you will use. They are easily searchable via Google, Bing or any other search engine. Because if you will post questions that you know nothing about would cause downvotes for you. That's ridiculous I know. So please when you are going to use jquery and know nothing about it, please try to go to Google and write this search item jquery if nothing found then append tutorial to the search query and find it. Best tutorial would be found on the site of the developer. Like you can learn jQuery on jquery.com and JSON at json.org.
I am using the following solution to scroll very long menus in my dropdowns:
http://css-tricks.com/long-dropdowns-solution/
Is there any way to stop the menu's from scrolling and becoming any shorter once the last menu item has appeared? At the moment, they keep shrinking even when the menu has fully loaded. I would like to avoid that if possible.
I think your trying to say your actual menu list items are shrinking? I'm not exactly sure if your saying the whole menu itself shrinks or just the items itself.
Try giving the (Li)'s a height and see if that keeps them consistent. Example.
nav li:hover li {height:3em;}
or
nav li:hover ul a {height:3em;}
Let me know if that helps!
Can someone please provide insight into how I can replicate the functionality shown in this example.
Specifically, the navigation bar (first tab) > Watches. The user can hover over the link and a full screen width dropdown is displayed and hides after either when a user clicks on a link or mouses out. I am creating a similar menu type drop-down and need this to function across all platforms and browsers, including ie7.
Appreciate the insight.
Nothing terribly fancy there, or that would require modern browsers, just using typical :hover psuedo-class to show the the menus, which are initially hidden.
There is a wrapper #navigation that sets position: relative (this allows children to be absolutely positioned relative to it). Then there is a <nav> tag inside there used to center. Then inside of that is a ul.level-1 with li's that are display: inline which are the main menu items. Then within those are the menus you are fond of, which are absolutely positioned down a bit and are 100% width.
Then the bit that displays the menu:
// level two menu hidden by default
div.level-2 {
display: none;
}
// show level-2 when hovering parent menu item
ul.level-1 li:hover div.level-2 {
display: block;
}