I am trying to creating a pull down menu in a navigation bar. I have the idea how to do it. I am just not succeeding in displaying the menu list on a layer above the "main page layer". The main page is shifted downwards when I click on the menu item. I am using display:none. How to force the menu list to appear above the main page without the main page changing its position?
If you wanna do using CSS then try adding CSS property position:absolute.
Here is an example of a CSS-driven menu using hierarchical list items: http://phrogz.net/JS/ul2menu/purecss_testsuite.html
Related
In a parent div, there is a "menu div" as I have shown in the picture. By clicking on the "menu" and a function in javascript, another window opens that contains the menu items.
As it is presented, the "menu window" exceeds the parent div margins. For the menu part, I have considered two different tags. One when it is in the parent div and the other when it opens with the menu items and with padding and margin settings in css I have put them exactly in the same position so that when the window opens, the observer does not recognize any displacement for "MENU".
Is there a simpler way to do this? Can I have only one tag for MENU?
Yes there is a simpler way than using 2 different menu tags.
You will have 1 menu tag (with some test for the menu) and put your menu items inside your menu tag (but don't display them - display:none). When user clicks on the menu, change the display of your items to block (display:block) and make sure your menu will show the items outside it's original size.
I am trying to use ddSlick jquery plug-in(a drop down with images) on my page. I'm trying to add this dropdown plug-in into a panel with size Height:200 to Widht:100px.
The problem comes when i clicked on the drop down, the popup menu goes under the other page elements. So last part of the dropdown popup can not be shown to the user.
Please let me know how can I make sure these kind of widgets get to overflow on other page elements?
Thanks,
Check your element z-index css property. Z-index handles
elements position in z-axis. z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
I altered the bootstrap tabs to work on hover and made some changes to hide the content tabs correctly.
I want it to function as a dynamic popup/flyout layer.
Now the problem is that it does not work properly when you dont hover over any content after hovering over the menu. I want it to be visible when hovering over the respective tab or over the content itself. The problem with my quick change of the original script is that it will still show the content when you leave the Tab to the left (1st menu item) or to the right (3rd menu item).
It is illustrated in the following jsFiddle:
http://jsfiddle.net/WnQvF/27/
A simple, clean solution would be appreciated.
Lets take a look at google services menu:
There is that More pop up menu. but when we resize page all that top menu line does nothing - its width stays constant:
Same thing happens when we enlarge page width:
So I wonder if there is any jQuery plugin for greation of smart top bar menus that would add items to More when needed and return items from More to main menu when resulution allows that.
Is there any such plugin for jQuery?
Perhaps, something like this?
I did a dropdown using JavaScript where on mouseover the dropdown opens. Now since i am using it in a side menu, i would like that when i go over the dropdown, instead of the dropdown items get over the items underneath, i would like that the items underneath move lower to make space.
I managed to achieve this by removing the overflow in the CSS however the problem with this is that when i enter the web page, the dropdown is fully expanded until i go over it with the mouse.
Leave the overflow:hidden in the CSS.
Add to the element style.overflow = "visible" when you want the menu to appear and use style.overflow = "hidden" or style.overflow="" on the element when you want it hidden again.
You need to get/calculate the hight of dropdown layer (supposing this is in different layer) and add this height to underlying menu item box element (checking whether dropdown is visible or not, of course).