Asked By
David Tonya
20 points
N/A
Posted on - 11/16/2012
Hi,
I want to fix the menu vertical para sidebar that has been created using CSS. This sidebar provides links to some other pages in my site. I don't want to overlap other sections of the sidebar upon hovering. How can I avoid overlapping of elements in the sidebar ?Â
Need help to fix the menu vertical para sidebar
Greetings!
Since there is already a first solution to your problem, I would like to impart the basic solution, or approach that you can apply to your website. This is the use of float and the margin.
This is the output:
Now in order to play with the positions of your desire sidebar you can either use frames, table, or cs's commands, in my case I just use CSS commands, which is the float and margin property.
To be able to place the sidebar to the left use this code:
To float it to the right, you can use this code:
Notice the float property was changed from "left" to "right".
You can also use margin property, to align your contents. Margin properties are: margin-top, margin-bottom, margin-right, and margin-left.
Good Luck, Best Regards.
Need help to fix the menu vertical para sidebar
Hi,
Step 1: The Markup
The menu will be compatible with CMS-generated menus using attached code.
Step 2: Basic Styling
Add some very basic styling to get list looking like a navigation bar using attached code.
Step 3: Horizontal Drop Down Menu
With this could be done with pure CSS using the : hover pseudo-selector using JavaScript to activate on click on the small – screen version.
Step 4: Vertical Dropdown Menu
To add in some media queries to style list into a vertical list breakpoint by using this code.
Step 5: Converting Hover to Click
With this code to check the width of the window, then write the code to set the click() and hover() events.
Step 6: Toggle the Menu
Using this code creates toggle navigation list button.
Step 7: A Bit More Style
Using this code creates little down arrow to know list items.
Step 8: Showing and Hiding
Using this code the menu toggle button will now toggle its own class of .active.
Hope to enjoy it.
Thank you
