Mixing jquery dropline and dropdown menu - javascript

How to achive that following menu act normaly like dropline, but last sublevel to be dropdown instead dropline?
Tnx

To make sure I understand the question, are you wanting the sub-drop-downs to display in a vertical list instead of horizontally? If so, try adding this to your CSS:
.droplinebar > ul > li > ul > li > ul > li
{
float: left;
clear: both;
}
ADDENDUM (to get the menus lined up properly):
I haven't tested this, but see if changing line 16 to the following does the trick:
$subul.css({left:$curobj.position().left, top:this._dimensions.h})
You may need to do something like the above on $targetul as well.
2nd ADDENDUM
It's a bit dirty, but you can always give the sub-ul's a unique id, and them use css to line then up manually.
http://jsfiddle.net/DxpMJ/11/
In that example, I gave a unique id to the JavaScript > Traveling 4 menu, and manually set the margin-left and overrode the width with the !important trick (which you should look up if you're not familiar with it - very useful when javascript plugins are setting CSS styles without your knowledge). If you don't mind manually adding css rules for all of the menus you need to be vertical, I think this would work.

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

ui-sortable not working (for predefined DOM positions)

Please see this demo Click Here
Item 3 does not get sorted.How To make every element sort perfectly?
Note : Item 3 is float:right thats the need in project.
Acually in my project I have used DOM positions (eg:left:20px , right:10px) rather than float left or right.
If anyone can make this
Demo workable than it would be huge help.
What i want is all the elements should sort (specially item 3 which is not sorting).
What I tried is this .Which is not perfect.
Explanation :when user drags a element to left side of parent div and drops than the element sticks to left of div .. if dragged to right it sticks to right. thats the reason i am using DOM positions. Now I have to make it sortable too.
The sort works, it's the css that is causing you problems. Try this way:
https://jsfiddle.net/or6m2v4z/4/
What I changed:
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; float:left}
#sortable li:last-child {float:right}
And I also removed the inline styles :)
EDIT
I just read the explanation you provided, if you want to drop elements left or right, maybe you should use a left and a right container and try with the droppable function instead of sortable.
drag drop and change parent of a div in dom
EDIT 2
I did a little workaround for you. Try this:
https://jsfiddle.net/or6m2v4z/5/
By having float: right on Item 3, you're explicitely telling the browser to position to the right hand side of everything else in the same block that is not styled with float:right.
If you have a look at the DOM in your browser's dev tools after having tried to move Item 3, you'll see that it has actually been repositioned.
Edit:
I guess this does what you need? https://jsfiddle.net/or6m2v4z/6/
Instead of having the float style on the items themselves, they've been wrapped inside two containers floating left and right respectively.
Using the sortable connectWith option, both containers can be linked so that their contents can be moved freely among them.
The containers need minimum dimensions so they don't disappear if empty (that's also the reason I added the gray background).

not statement in CSS? Or way around? (superfish)

I have tried finding this on the net had no luck.
I'm using superfish dropdown and I need the top li to be rounded, but not li's with ul's inside, if you see here this is the test page where its demo'd:
jsfiddle: http://jsfiddle.net/UdvBC/
But i need to say sort of.. only apply the rounding on the top li not the ones in the dropdown, is this doable?
Thanks :)
You are looking to use the :first-child selector from what I gather...
http://www.w3schools.com/cssref/sel_firstchild.asp
It allows you to apply special CSS to the very first item. Just make sure to apply the first-child selector AFTER the styles applying to all items, so as to prevent overriding the first-child properties.
Example:
ul li { background: red; }
ul li:first-child { background: blue; }
Putting it in the opposite order would override the first-child CSS.
Edit: Thanks for the correction!
CSS cannot really accept not statements like that, so I'd suggest defining separate classes for the two types of li's.

Son of Suckerfish Menu IE6 - menu hiding behind content

Page - http://blu-eye.com/index.html - contains suckerfish menu which is displaying correctly on the rest of the site, except for this page. The menu items are hidden behind the content below.
The content below it contains a javascript slider with image and text. I've tried changing the z-indexes on majority of elements, but still having no luck.
It only occurs in IE (6 and 7).
Please help!
The drama you have is the use of relative positioned elements, which reset the z-order context on < IE8.
Specifically on div#header, remove the position relative. then on div#cat_528463_divs > ul > li set a z-index (of 1000 for eg). This will fix the nav issue from tucking in under the JS slider – however it will screw up the look of the rest of the top section, because they are absolutely positioning the logo and some other images. So that is going to need to be rebuilt.
IE has a slightly different stacking order of elements so just setting something with a different z-index will not necessarily move it above.
Taking your starting point as your wrapper, add position:relative to it and then work down into your HTML. If you imagine that at your start point, then you need to get your menu div and your slider div to at least the same 'depth'.
You might find adding position:relative to #content as well might help.
You can then change the z-indexes.
Add z-index:100 to the submenu's li's
#nav_528463 li ul li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
float:none;
margin:0;
padding:0;
z-index:100
}
I found this bit of jQuery very handy for your problem:
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Categories

Resources