Mega dropdown menu with fixed place content - javascript

I've fiddled around with some mega menus, but I can't get them to use a fixed position for the drop down content. All of them shows the content like this:
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
But I want it to show up like this (no need for the fancy effects though):
simplifiedsafety.com/
I think I got it fixed, with the code HerrSerker posted
Working code for others:
http://jsfiddle.net/aT3nQ/embedded/result/
This doesn't use js or jQuery though.

Drop the position:relative on th li, add position:relative to the ul and give position:absolute;left:0 to the .sub

Related

Need to enforce edge of container on nav dropdown

So I'm a bit flummoxed about formatting this nav (Contact dropdown) to not overflow outside the container:
http://782.2b6.myftpupload.com/
I'm sure it's because I've used position:relative a bit to move the nav around and make it stay inside the orange stripe. There'd be a lot of code to post in regard to what's going on with the nav as I'm just customizing a theme. Hoping someone can help me pinpoint what container I can target and what to code for forcing the "Contact" dropdown to come down flush against the website container, therefore showing a little below "Blog" as well rather than just busting out to the right. Help please!
Screenshot of .sub-menu popping out of container
I was able to achieve this by adding:
.sub-menu {
right: 0;
}
Although doing so will apply this to each item with the .sub-menu class. If possible, add a new class name to that element to add the CSS above.

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Make Menu have a slideToggle Effect and push below elements down

I'm using a nice Mega Menu from CODROPS and I'm trying to customize it to have:
1) a slideToggle effect
2) When the menu is opened to push the below div element down (IE: not overlapping the below elements)
Here is my JS FIDDLE
This is what I've done so far:
1) I know very basic jquery and usually I know how to apply a slideToggle effect but I can't seem to get it right with their javascript code, so I'm left guessing where to place it but having no success. I've tried researching online but can't find a solution.
2) To make the element below the menu get pushed down, I know to make the position relative in the css below but that just breaks the menus float when it's activated.
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
It would be nice to have the elements below pushed down but the slideToggle effect is a bit more important to me...
You'll have to refactor this a bit to get it to work the way you want it to.
The .cbp-hrsub element containing the sub text is positioned absolutely, overlaying any text below. You would need to remove position:absolute to revert to the browser default position:static.
However, as the .cbp-hrsub element is part of each menu <li>, this pushes the other <li> elements down.
I'd suggest splitting the HTML out so that your menu <li> elements are separate to your sub text elements. Contain the subtext elements in a new <ul> and get these to slide down on click of the associated menu item link.

Dropline Menu in Wordpress

Right, the big problem here is that I have a fix html format that WP generates from the wp_list_pages('title_li='); function. It's a pile of nested lists. Now I wish to style that as a dropline menu with hover functionality.
http://hedag.openskin.org/?page_id=286 You can see what I've managed up to now there, I'm using z-index to try and overlay the current subnav with the one from the hovered subnav. Now I've read up on the z-index and I don't think it's possible to get it working using only css because the seperate "children" lists are in different stacking contexts.
So now my attempt is to remove it using jquery when you hover over another one of the main navigation elements. Would any of you be kind enough to either
tell me what's wrong with my z-index/css stuff and fix it that way (preferred, it'd be pretty cool) or
2. fix my jquery code so it'd work, I'm loading it in the <head> tag.
Current jQuery code:
<script>
jQuery(document).ready(function($) {
$('ul#nav>li').hover( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').hide();
$('ul#nav>li.current_page_ancestor .children').hide();
}
});
});
jQuery(document).ready(function($) {
$('ul#nav>li').mouseleave( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').show();
$('ul#nav>li.current_page_ancestor .children').show();
}
});
});
</script>
Using jQuery the menu now works as intended, it'd still be interesting to find a purely css solution to this as I'm fairly sure nested lists are a pretty standard navigation scheme and droplines are often the best option. One other thing that might be interesting to solve is getting the sub-nav to be left or right aligned with the parent ul and not the parent li.
The tricky thing about the CSS z-index property is that it's only applied to elements with a position specified in your stylesheet: either relative, absolute or fixed.
Looking at the source code on the page you linked, you should be able to style this with a pure-CSS solution. You only really need to use JavaScript if you want to support old versions of Internet Explorer.
ul li{ /* your top-level list */}
ul li ul{ display:hidden; position:relative; }
ul li:hover ul{ display:block; }
ul li.over ul{ /* if you want to support old versions of IE */ }
For accessibility, you can use left:-9999px in place of display:hidden. There's a detailed writeup of this technique here: http://www.htmldog.com/articles/suckerfish/dropdowns/ and at the bottom of the page you'll find an example of a horizontal nav menu, if that's what your final design calls for.
If you want to use
jquery.dropy

css and javascript onmouseover type effect

When I visit some sites and take mouse pointer over some menu item, another sub menu items comes up in another panel adjacent to main menu item. Thus giving an effect like onmouseover. But when I see the source code (like View source option in IE) there is no onmouseover / onmouseout event defined in the menu item list element.
For example, in the website http://www.seoconsultants.com/ - take mouse pointer over SEO Search on the left panel or in the website http://www.znetindia.com take mouse pointer Email option on top menubar
How to get such effect using css and javascript.
Without JS, just with CSS. Take a look at the source code: http://www.seoconsultants.com/css/seo.css
/* Begin CSS Popout Menus at Left */
#menuleft ul li{position:relative;}
#menuleft li ul{position:absolute;left:180px;top:0;display:none;padding:0;}
div#menuleft ul li:hover ul{display:block;}
Basically you say: "When the mouse is hovering over a parent list element, the child list should be visible."
This is done through the use of the :hover CSS attribute attached to the CSS rule of the parent node.
Consider the following HTML code:
<div class="parent">
<span class="label">Always on!</span>
<span class="hiddenLabel">Show on Mouse</span>
</div>
You achieve the effect you mention with the following css code:
.parent .hiddenLabel {
visibility: hidden;
}
.parent:hover .hiddenLabel {
visibility: visible;
}
This basically tells the browser that when a mouse hover event occurs on the "parent" node, the nodes with the CSS class of "hiddenLabel" will appear to the user and disappear when the mouse moves off the node.
This is the best practice for achieving this effect because of the load time and processing required for the javascript to start running on the page is longer than CSS being loaded.
Here is a great write-up on pseudo selectors and what each of them do: http://css-tricks.com/pseudo-class-selectors/
Take a look at jQuery and some plugins. See this site for a list of jQuery dropdown plugins. http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/

Categories