Need help to fix the menu vertical para sidebar

Asked By 20 points N/A Posted on -
qa-featured

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 ? 

SHARE
Best Answer by Franke Mary
Answered By 0 points N/A #158121

Need help to fix the menu vertical para sidebar

qa-featured

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:

positions of your desire sidebar 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:

positions of your desire sidebar

To float it to the right, you can use this code:

positions of your desire sidebar float it to right

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.

Best Answer
Best Answer
Answered By 0 points N/A #158120

Need help to fix the menu vertical para sidebar

qa-featured

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

Login/Register to Answer

Related Questions