This problem sounds trivial, but i got headache trying to solve it. I downloaded this free and simple menu from javascript-array.com/scripts/simple_drop_down_menu/ (code is included on the page). It's ok, it works fine, but i don't know what should i change in order to make it align in different way. As you can see from the example, dropdown menu (shown when user position his mouse over top menu) has the same left margin as top menu (top menu, for example "help" is LEFT-aligned with corresponding dropdown menu).
What should i do in order to make dropdown RIGHT-aligned - align RIGHT margin of dropdown menu with right margin of top menu (for example, right margin of "help" dropdown to be aligned with right margin of "help" button).
In some c-like language it would be easy: dropDiv.left=(TopDiv.left+topDiv.width)-dropDiv.width but i have no idea how to do it for that menu from page i'v posted.... :\
Please help!
use tables, you can align all your elements as desired..!
In the <style> block (included in your <body> section), under #sddm div a simply change text-align: left; to text-align: right; and then your listed menu items will align right.
Related
I have a hamburger menu icon that is linked to a dropdown navigation menu at (top left side of screen) as shown in following link:
http://tahoe-luxury-properties.com/index2.html
I want to make it so when the the hamburger menu (3 bars) are clicked, the menu drops flush to where the top nav bar ends. So right now you can see the top nav bars color underneath the drop down. It is sort of hard to explain, but I want it to look more like this picture at below link:
http://integratedresourcemgmt.com/navmen.html
I just want it so there isn't the overlaying color making it seem disjointed, in a sense.
I tried moving the hamburger menu down and I couldn't get it right. I was thinking that since I can adjust the size of the navigation-menu (width, padding) there must be away to move it down without moving the hamburger and nav exit icons/rollovers. I have been fooling with this for a while and am just not sure if it is possible? Any ideas? Thanks so much. -Beth
So here is the code I'm working with. I first had a container with flex, and that allowed me to place predictors and taglist on the left hand side (one on top of each other, this is fixed position) and the rest to the right side of it.
Now I wanted to add a menu that would stay on top and be fixed, i.e. stays there while I scroll. But I can't seem to do that, and doing position: fixed on the menu puts it to the left and over the predictor/taglist section.
Here's a js fiddle of what I have.
https://jsfiddle.net/o72oj083/
Here is your working FIDDLE
Just add top:0px and give body a padding-top:30px.
Hope that helps Thanks :)
On this website: http://www.apple.com/ca/ipad-pro/ is the apple website. On the top of the page you will see two navigation bars. The top one which is the main one and one underneath it that appears after you scroll down out of vision past the first one.
I understand this process is simple but I can't figure it out!!
Can someone tell me how they made the second one "fixed" AND stay at the top of the page?
When I try this my navigation bar has a space between the top nav and bottom nav. Pretty sure it's Javascript but I don't know enough. Thanks
You're basically going to change the attributes of the secondary nav to position: fixed; top: 0; once the user scrolls past a certain point. Check out this tutorial:
https://teamtreehouse.com/community/forum-tip-create-a-sticky-navigation-with-css-and-jquery-2
The submenu shows to the right and is off of the screen when there is plenty of room to pop open on the left. how can i implement the feature that allows submenu to appears to the left rather than right by first checking to see where the menu should appear
Here are the images to show what i exactly mean. (This is typical windows right-click on desktop taken for example)
In this image, submenu is opening on left knowing that there is no room on right side.
In this image, submenu is opening on left knowing that there is room on left side.
I want to implement feature like this.
So, how i can achieve this?
I tried tweaking my CSS
with this
.sf-menu > li:last-child > ul ul {
left: auto; // reset the default positioning
right: 100%; // this makes the submenu fly out to the left
}
with Supposition Plugin written by Joel Birch
this solves it. but i can't use this plugin in my work.
is there any other way to do it ?
I am attempting to build a content navigation pattern that uses vertically stacked tabs to toggle the display of hidden content panels next to the tabs. At smaller widths, this pattern breaks.
Heres my fiddle: http://jsfiddle.net/jrotton/xCeX8/1/
It is somewhat responsive...but lets say I have 12 tabs and the length of their labels range from "Nursing" to "Architecture, Design, and Construction". This breaks when the screen gets below 500px or so.
I could:
.contextNav { width: 100%; }
ul.checklist-select li { display:inline-block; }
..it works but it not ideal when you have more than a few tabs.
I would rather hide the tab menu and change the panels into collapsibles with clickable h2's. It's also important that the pattern is screen-reader-accessible but I haven't made it that far yet.
Any ideas on how I could do this? Thanks in advance..
http://www.zurb.com/playground/off-canvas-layouts
Here's a few ideas...
Also I would say with what you have at the moment, floating that menu to the right on the mobile version isn't going to work. at the mobile size, those nav items should be 100% width, and the nav should be above the content, or should be another "slide panel".
Jquery mobile also has some very useful, very common design patterns built right in:
http://jquerymobile.com/