moving glyph icon toggled menu bootstrap - javascript

I'm making a reusable toggle sidebar menu and cannot for the life of me get this glyphicon to be anchored to the left of the menu so it is always visible. Right now it looks like the first image in the album.
I'm using a template so I'm pretty sure that it's just some little css thing I haven't messed with, but my instructor was unable to fix it as well :O
When the menu is toggled, it looks like the second image. I would obviously like the glyphicon to be visible, showing that it can be toggled out again.
And I have one slightly other bad problem (the third image):
When the menu is toggled closed, there is a scrollbar across the bottom >.<
Here is a link to my html/js and css on JSFiddle
And the JS I use for toggling
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>

I've created an update JsFiddle with it working here
It was the text-indent property and display block causing the issue.
I have changed your CSS to:
.sidebar-nav li a {
text-decoration: none;
color: #999999;
}
.sidebar-nav li.link a {
text-indent: 20px;
display: block;
}

Related

Hide div if nav is opened

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.

jQuery .show doesn't display the background

I am making the navigation bar for a website, and I want to add nice effects to it. Now there is a dropdown menu with submenu's, and I want those submenu's to slide in. But for some reason it doesn't show the background when animating, and the text goes on top of the border next to it. Here is a link to what it looks like. There is something weird happening as well when hovering over multiple times.
for some reason I have to accompany links to jsfiddle.net with code, so here it is.
You missed setting the color for the the #parnavdrop ul li. JSFiddle
#parnavdrop ul li {
background-color: #41D4CF;
}
Actually the issue is you have mentioned background-color to inherit.
.nav ul #navdrop #subnavdrop{
background-color:inherit;
}
So it is inheriting background color from its parent which is causing the issue.
So the following code change can also resolve the issue.
.nav ul #navdrop #subnavdrop{
background-color:#41D4CF;
}
Sometimes just because of these stop() functions JS functionality is not working properly

href not loading link every time part of the li is clicked. Using javascript to make the whole li clickable

http://hemakessites.com
I'd like to click the About button to go to the About page. I'm using Javascript and JQuery to handle the behavior (make the whole li clickable). For some reason, clicking about in different areas of the li doesn't always load the page.
I'm open to not using jQuery if there's a better solution.
The "contact information" and "hobby projects" li don't have an href, so the links don't work. If you go to the About page, the menu works based on CSS without the javascript trying to make the whole li clickable. So there is no javascript on the about.html page, and you can see the menu problem without any javascript.
Thanks for your help!
index.html
<div class="navcontainer">
<ul><li>Link Title</
li><li>Second_Link Title</ <!-- fixes extra space with </li><li> -->
li></ul>
</div>
style.css
#nav li
{
display: inline-block;
List-Style-Type: None;
float:left;
text-align:Center;
width: 153px;
height:46px;
font-size: 80%;
border-Bottom: 1px solid #666666;
}
#nav li #about
{
z-index: 10000;
position: relative;
top: 18px;
text-decoration: underline;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
}
just add the following in your CSS:
#nav li.about a{
z-index:10000; }
and it will work
Your issue is not the javascript, but the CSS. You have a hover attribute that enlarges the <li>. When you click, the active attribute causes it to shrink, making the element smaller than it previously was. If you click in the upper corners of the enlarged element, it won't load because the element is now below the clickable area. If you click in the middle towards the bottom, it will.
Ultimately, for something like this, you might be better off using jQuery UI to manage your tabs or use Twitter Bootstrap. Out of the box it works, and you don't have to worry about CSS issues, plus they already look nice so no extra styling.
If you want to stick with you already have going, you may just want to ditch the fancy CSS. Get rid of the :active class and it should work okay I think.
The problem you have right now is that the li is bigger then the a. Clicking on the li, but outside the a will not make the link work, as you already found out.
In stead of applying all your styles and effects to the li element, you should apply them to the a element directly and set it to display as a block. This way the li will take the same size as the a, and whereever you click on the hovered item, your href will work just fine. Bigger links is always a good idea, definitly with the amount of tablets and other toutchscreen devices rizing every day.
Note that it will not be a straight copy / paste of your code, especially when it comes to floats and positioning, but it should not be to hard to achieve what you are after by applying the styles directly to the a element. If you have difficulty converting your code, feel free to set up a working example on jsfiddle and we will be happy to help out where possible.
This solution does not require any js what so ever. Using js for your main navigation is always a bad idea, as it will make it hard, if not impossible, to navigate your site for people with js disabled. Not exactly what i would call gracefull degrading...

Jquery easeOutBounce direction?

I am attempting to use a Jquery menu, that makes use of the 'easeOutBounce' easing method. It is working fine but, I cannot figure out how to change the direction that the menu is bouncing out from. It currently expands to the right and bounces. My menu will be right-align and I want it to expand to the left.
This is the example I'm using: http://jcargoo.110mb.com/rightmenu/
Is this what you are trying to achieve? http://demo.raleighbuckner.com/so/1338381/
If so, all I did (other than removing the extra examples) is to change this CSS:
#sliding-navigation1 li {
text-align: right;
}
to this:
#sliding-navigation1 li {
text-align: right;
float:right;
clear:both;
}

JavaScript: Nav Bar Drop Down inside List Item

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;
}

Categories

Resources