|
 |
|
css tutorial
|
| You should be familiar with CSS, specifically the basics, "classes", "pseudo classes", as well as "grouping" and "order of precedence" |
| |
| Please read the below for a quick tutorial on each topic |
- Css Classes and Css Pseudo Classes
"classes" are used to specifically target the menu item for "so and so" kind of formatting.
"pseudo classes"
are used in conjunction with "classes" to add special effects to the menu items such as rollovers, etc.
Note: Template Parameters are managed by Menu Hot Sauce so as to control the ON and off states of the menu items.
- Css Grouping1 and Css Grouping2
"grouping" is used to format a group of css classes so that Css stylesheet has "efficient" code. In other words, if we want to have "Arial" font for these sets of classes, we group them together in a single multi-class definition so that we don't have to write, "Arial", "Arial", "Arial", "Arial, over and over and over again for each css class definition.
- Css Cascading and Inheritance and Order of Precedence
In conjunction with css "grouping", each css class is further defined afterwards to give it its unique formatting. So whereas a css "grouping" says all these classes use the same font, e.g. Arial, each individual css class in the group is defined a 2nd time so as to give it, for example, a different, color, say, "red" for instance, or "blue"
- Css Cheatsheet
|
| |
| |
Example CSS for file: MHS_VTreeButtonsSTYLE.css (this example is for the Vertical Tree Menu) |
| |
/* + + + + + Tree List 01 + + + + + */
/* 1st Cell */
.Tree01TD1_ON_HOVER ,
.Tree01TD1_ON ,
.Tree01TD1_HOVER ,
.Tree01TD1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: left;
vertical-align : top;
padding: 7px 5px 3px 5px;
background-color: #008080;
background-repeat : no-repeat;
cursor : pointer;
}
.Tree01TD1_ON_HOVER {background-image: url(images/Bg_008080_TD1.gif);color: #FFCC00;}
.Tree01TD1_ON {background-image: url(images/spacer.gif);color: #FFCC00;}
.Tree01TD1_HOVER {background-image: url(images/Bg_008080_TD1.gif);color: #FFCC00;}
.Tree01TD1 {background-image: url(images/spacer.gif);color: #003063;} |
| |
So, WHY all this advanced CSS to set the
colors, background, etc.? |
In order to get the ON and off states for all the buttons as well as the HOVER for both ON and off states, there has to be separate CSS classes for each state. This are 4 total. Next, each "level" for the tree could be different as well. Note, if you want it all the same, you can make each level the same properties, just keep use the different class name for each level of the tree menu.
And it's the same for the horizontal menus, well almost. That's a little bit more tricky. With the CSS Horizontal menus, each button has 3 parts, left, middle and right. The middle part automatically expands to the width of the name of the button or the text name. The left and right parts are for "curved, rounded, squarish, or none at all " sides for buttons and tabs. Even if you don't want curved, rounded, or squarish sides, you still have to use them. These 3 parts make up a single button and respond as a unit when the user rolls over each button. Using a different CSS class, the left, middle and right part of each button, the menu item appears as a single button and is able to have the rollover effect as well as the ON and off states as well. With the CSS classes and a tiny piece of Javascript, it can be cross-browser and have tremendous speed for all sizes of websites. A little Javascript and CSS can go a long way if done right.
In a nutshell, by using basic CSS and JavaScript, many different menu types can be created that have many different effects, yet, still giving the user one of the fastest menu system ever created, especially for very large websites. This, used in conjunction with templates allows the user to make a single change and have the entire website reflect that change. And when used in conjunction with nested templates also allows the user to make a single change to update a targeted part of the website instead of the entire website; thus, you get both: the ability to change the entire website, or change a target part of the website as desired.
The only drawback is the complexity of the code which is mostly solved by the Menu Hot Sauce Helper that essentially writes the changes to the HTML code for you.
Note: the correct Javascript is automatically copied to the website and linked to templates so you really don't have to even do a thing for that part.
All the user is to do is set the colors, font, font-size for each menu type as desired in the CSS stylesheet that is used for the type of menu he or she chooses. |
| |
| |
|
