Skip to content

More Menu Sliders Needed! (Part 2)

March 11, 2013

As I continue working on getting the right left hand menu slider which can potentially solve most issues with the css and browser incompatibilities, I had been recommended to use existing frameworks that have been possibly been used by many people and tested to some full extent. This is a good idea, but having a top bar menu and side menu slider that practically sits on top of the website which works and not having your own static pages is a completely different question.

Having took a slight gamble and worked on an existing framework, called sidetap (http://sidetap.it), testing it locally on the machine, and then placing an iFrame worked perfectly fine, I realized the css coding for the side menu slider is what I needed!

However over time, after solving the JQuery injection, over time similar problems with the CSS clashes occurred, and exactly the same amount of reworking on the css styling is needed, so its not a problem you can instantaneously solve! Kind of back to square one!

A few things I solved from the original top bar and side nav bar I generated are looking from the sidetap.it framework are: –

Set the outer container to position:absolute containing both the top <nav> and side <nav>, this places the both navigation components in its definitive place.

Also set the default css styling in your own style.css file: –

This overrides the body and nav in-line styles to be set to 0px 0px in its margins, and also to set nav a links padding to 0px 0px, as sometimes other css from the website can override this which affects the side bar navigation.

body{
0px 0px!important;
}

nav{
margin:0px 0px!important;
}

nav a{
padding: 0px 0px;
}

Also override the font size in the h1 headers inside navigation like so for example:-
nav#toolbarnav h1 { text-align: center; padding-top: 10px; padding-right: 40px; color: #ffffff; font-weight: bold; text-shadow: 1px 1px 0px #313131; font-size: 1.2em!important}
Advertisements

From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: