We Keep Coding

"Priority Nav" breaks when div is floated

I'm using the "Priority Navigation" design pattern. For those who aren't quite sure what this is, basically when the viewport width is reduced and there isn't enough space for all the list-items to fix horizontally, they're moved into another nested list so they can still be accessed. This is within a "more" link at the end of the list.
At a basic level, this works fine in my example (below):
http://codepen.io/moy/pen/RrRJBe
The problems I'm having are:
1) Because I have another item alongside the navigation, which is floated (and of unknown width), I needed to set overflow:hidden; on the nav. This means when the width of the container changes, the nav stays alongside the other content rather than dropping onto the next line. It's fixes that ...the problem is it also means the dropdown on the end isn't visible as it's displayed below the navigation and overflow: hidden; is set.
Any alternative (CSS) fixes for this?
2) Another issue is the nav links need to be positioned to the right. No problem, just float the div right, yeah? Unfortunately it doesn't like this and the page almost crashes - must be something to do with the script trying to calculate the widths? As soon as the nav or it's parent is floated, it breaks!
The list-items are floated left so they display horizontally. Instead I tried using display: inline-block and text-align: right;. This positions the text correctly but when there's not enough horizontal space the items either wrap or all collapse into the "more" link rather than one-by-one.
-
Browser requirements: It's worth noting that my browser support is IE8+, so flexbox is unfortunately out the window. Even if it worked, it would mean that I'd have to find a fix for IE8/9.
Is anyone able to help with this, or maybe there's a plug-in I should take a look at. This script works great when the nav is isolated but as soon as another item is in it's path it becomes a bit tricky. On a previous attempt I got the width of the item which was in the way and subtracted it for the available space. But that isn't that flexible/scalable - but that again, maybe there isn't another way?
Thanks, hope someone can help!

Part 1
You can use clearfix instead of overflow: hidden.
Add the following to the parent element containing nav:
.wrap:before, .wrap:after {
content: '';
display: table;
clear: both;
}
But if you need to support IE8, you can just add element like below to the bottom of the parent element containing nav
html
<div class="clear"></div>
.clear {
clear: both;
}

jQuery fadeIn/fadeOut in an Unordered List

I am trying to use jQuery's fadeIn/fadeOut effects on images that are being used as buttons in an unordered list. I want to be able to have the hovered image fade in quickly and out slowly on mouseout. The problem I am having is that I am trying to do this as horizontal menu with floated <li> tags. I created a jsfiddle with as simple of an example as I could. The list in the example contains only 1 list item, but it will actually have 4 or 5.
In order to position the hover images I have created a second <ul> so that it is positioned on top of the other list. What is happening now is that when hovered it does the fadeIn fadeOut twice. I assume that this is happening once for each of the <ul>.
Is there something I can do to position two images on top of each other, within the same <li>? Or another(better) way altogether to accomplish this? Any help is appreciated.
DEMO

You can get rid of the second <ul> by putting the two images within your #menu1, and then adding this few properties to your CSS:
#menu1 {
position: relative;
}
#hovbutton1 {
position: absolute;
top: 0;
}
That way you're positioning your hover image in an absolute position relative to its parent, so when shown, it will appear on top of the other one.
Here's the jsFiddle, hope it helps.

Link Tag Display Block Not Stretching Full Width

Please correct me if I am wrong, but display: block; turns any element that has that CSS declaration into a block element, correct? That means that the specified element with the display: block; declaration will span it's entire width available, right?
I ask this because I currently have a navigation that houses a drop down menu with nested unordered list items, that are supposed to inherit the width of the width of the parent list item.
link removed
Notice once hovered over Teams, you see the 18U and 17U link list items are not stretching their appropriate width. I can only assume that this same issue is applying to all of the list link items.
BUT: Once you go here: link removed and notice there are more than two links, the issue is no longer a problem. It takes up the full width.
Also, once the page has loaded and you hover over one of the list items for the first time, the navigation menu is kicked to the right a little bit.
The problem is persistent in Google Chrome.
May someone help me out here?
Thank you.

You have your li's width being set with
width: 100%
Which will only work if the elements parent (the ul) has a width set. Set...
width: 100%
... on the ul too, and it works fine.

How to make a div of fixed height and width scroll horizontally when childs are not more visible?

I need to create a sort of cart, where I store elements created by the user.
I've created a simple scheme to help you understand my needs:
.buttons are two div containing an image (an arrow), where I'll bind an onclick event to scroll elements (#scroller). The layout has fixed sizes, thus the exact length of ul#scroller (the element that will contain items and that needs to be scrolled) is 900px.
I think the size of any #scroller child <li> will be ~100px.
There's a button (not present in the scheme) that allows the user to store in #scroller an item.
Actually when there are too many items the next will go on the bottom (beginning a new line). Instead I'd like that the new elements go ahead on the same line, but hidden (without hit #button_right).
I was thinking to do this with javascript, storing elements in an array, and keeping visible only the first 9 (x 100px), then by clicking on the arrow (let's say, the right one) hide the first item and show the 10th.
Do you think this is a good solution?
If not, what do you suggest? What CSS rules could help me to do it?
Thanks in advance.

you need to create an extra div with a very long width, and put it inside #scroller and make #scroller have an overflow: hidden so it doesn't show the scrollbar.
like this:
html:
<div id="scroller">
<div id="inner">
(your items)
</div>
</div>
css:
#scroller {
width: 900px;
overflow: hidden;
}
#inner {
width: 90000px;
}
P.S. now the items won't go to another line but you need to code the buttons so they scroll the content depending on the number of items, depending on their width behing the same it can be more simple or not.

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/