Need help to fix the menu vertical para sidebar

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 ? 

• Status: Open
• Question Views: 813
• Answer Count: 2
• Vote Up 1 Vote Down

• Answer Accepted: Yes
• Question Category: Web

Best Answer by Franke Mary

Go To Solution

Answered By Molina Kevin 0 points N/A #158121

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.

About Molina Kevin

Questions
3

Answers
55

Best Answers
25

• Vote Up 0 Vote Down

• Posted on - 01/22/2013
• Question Category: Web

Best Answer

Best Answer

Answered By Franke Mary 10 points N/A #158120

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

About Franke Mary

Questions
3

Answers
102

Best Answers
23

• Vote Up 0 Vote Down

• Posted on - 02/17/2013
• Question Category: Web