Ok, just as an example of how it's panning out, I've split the main/admin drop menu and sidebar menu coding into basic layout stuff that holds it all together (in index.css) and eye candy (in the_variant.css).
This has been done for two variants: the cool one that runs here, and a dead basic one that is as simple as possible, as a basis for n00bz and others to play with in their quest for coolness.
To run properly, these need images folders in themes/images, and calls for the variants in index.template.php, and language strings, etc. So, I'm not putting everything here, but these are the relevant excerpts from the three CSS files. Spacing and commenting can be altered, but I think it's pretty clear already.
index.css
/* Styles for the standard dropdown menus. */
/* --------------------------------------------------*/
/* @todo - Lots of interdependent revision here to minimise code. */
/* This is layout code only. All the eye candy is in the _variant.css. */
/* NOTE: This layout code should NOT be altered */
/* unless you are really sure of what you are doing. */
/* ALL variants depend on this basic layout code for stability. */
/* ----------------------------------------------------------- */
/* Visible menu bar: wrapper/background. */
#main_menu {
position: relative;
margin: 6px;
padding: 5px 8px 4px 8px;
}
/* @todo - Collect all pseudo clearfixes in one declaration. */
#main_menu:after {
content:"";
display: block;
clear: both;
}
/* Wrapper for secondary admin/profile/etc menus- positioning only. */
#adm_submenus {
padding: 10px 15px;
overflow: auto;
}
/* Level 1 button positioning. No visible styling. */
/* 1px padding gives slight gap between buttons, and drop menus. */
.listlevel1 {
padding: 1px;
float: left;
line-height: 2.3em;
position: relative;
}
/* For the upshrink button in the main menu bar. */
#collapse_button {
position: absolute;
top: 4px;
right: 8px;
}
#upshrink {
padding: 4px 9px 3px 9px;
}
/* Level 1 Menu bar: link or button. General sizing. */
#main_menu .linklevel1, .admin_menu .linklevel1, #adm_submenus .linklevel1 {
padding: 0 0.5em;
display: block;
}
/* Levels 2 and 3: drop menu wrapper. */
.menulevel2, .menulevel3 {
z-index: 90;
position: absolute;
top: 100%;
left: -9999px;
width: 18.2em;
padding: 0.5em;
}
/* Level 3: drop menu positioning. */
.menulevel3 {
margin: -2em 0 0 15.3em;
}
/* Reposition Level 2 drop menu as visible on hover. */
/* @todo - Check Superfish class. I think .sfhover may be deprecated. */
.listlevel1:hover .menulevel2, .listlevel1.sfhover .menulevel2 {
left: 1px;
}
/* Hiding Level 3 drop menu off hover. */
.listlevel1:hover .menulevel3, .listlevel1.sfhover .menulevel3 {
left: -9999px;
}
/* Reposition Level 3 drop menu as visible on hover. */
.listlevel2:hover .menulevel3, .listlevel2.sfhover .menulevel3 {
left: -14px;
}
/* Level 2 and 3 button positioning. No visible styling. */
/* 1px vertical padding gives slight gap between buttons. */
.listlevel2 {
padding: 1px 0;
width: 17em;
position: relative;
float: none;
}
/* Levels 2 and 3 drop menus: link or button. */
.linklevel2, .linklevel3 {
position: relative;
line-height: 2.2em;
padding: 0 7px;
display: block;
}
/* @todo - Note: The next declarations are for keyboard access with js disabled. */
/*.dropmenu ul a:focus, .dropmenu ul ul a:focus {
margin-left: 9990px;
border: none;
width: 17em;
}
.dropmenu ul ul a:focus {
margin-left: 19950px;
}
/* @todo - Cancel those for hover and/or js access. */
/*.dropmenu ul li:hover a:focus, .dropmenu ul li.sfhover a:focus {
margin-left: 0;
width: auto;
} */
/* Styles for sidebar menus.
------------------------------------------------------- */
#main_container {
position: relative;
}
/* @todo - Collect all pseudo clearfixes in one declaration. */
#main_container:after {
content:"";
display: block;
clear: both;
}
#main_admsection {
position: relative;
left: 0;
right: 0;
overflow: auto;
}
#menu_sidebar {
width: 185px;
float: left;
padding: 0 10px 1em 0;
}
#menu_sidebar .catbg {
padding: 5px 8px;
font-size: 1.1em;
}
#menu_sidebar .sidebar_menu {
padding: 4px 0 9px 0;
}
/* Same styling for Level 1 and Level 2. */
#menu_sidebar .listlevel1 {
padding: 1px 0;
line-height: 2em;
float: none;
}
#menu_sidebar .linklevel1, #menu_sidebar .linklevel2 {
display: block;
padding: 2px 7px;
}
#menu_sidebar .listlevel1:hover .menulevel2, #menu_sidebar .listlevel1.sfhover .menulevel2 {
top: -1px;
left: 160px;
}
/* @todo - Check these again. */
/* Note: The next declarations are for keyboard access with js disabled. */
#menu_sidebar .linklevel2:focus {
margin-left: 10150px;
width: 17em;
}
/* @todo - Check these again. */
/* Cancel those for hover and/or js access. */
#menu_sidebar .listlevel2:hover .linklevel2:focus, #menu_sidebar .listlevel2.sfhover .linklevel2:focus {
margin-left: 0;
width: auto;
}
/*End sidebar flyout coding. */
_light.css (the one you see here)
/* This variant is the standard, light, Elkarte default theme. */
/* ----------------------------------------------------------- */
/* This is eye candy only. All the layout code is in index.css. */
/* NOTE: The layout code in index.css should not be altered
/* unless you are really sure of what you are doing.
/* ALL variants depend on the basic layout code for stability. */
/*----------------------------------------------------------- */
/* Styles for the standard dropdown menus.
----------------------------------------------------------- */
/* Visible menu bar: wrapper/background. */
#main_menu {
background: #4b863c;
background-image: linear-gradient(to bottom, #5BA048 0%, #3d6e32 100%); /* W3C */
border-radius: 6px 6px 0 0;
}
/* Needed for new PM notifications. */
.listlevel1 strong {
color: #fff;
}
/* Level 1 Menu bar: link or button. General sizing. */
#main_menu .linklevel1, .admin_menu .linklevel1, #adm_submenus .linklevel1 {
/* If there will be a border on hover, ensure there is a default border. */
/* Applying a default transparent border stops links jumping on hover. */
border: 1px solid transparent;
border-radius: 4px;
color: #fff;
}
/* Override link colour for admin/profile/etc menus. */
.admin_menu .linklevel1, #adm_submenus .linklevel1 {
color: #444;
}
/* Level 1 button hover and focus effects. */
#main_menu .active, /* Level 1 active button shares same styling. */
#main_menu .linklevel1:hover, #main_menu .listlevel:hover .linklevel1, #main_menu .linklevel1:focus,
/* For primary admin/profile/etc drop menus. */
.admin_menu .linklevel1:hover, .admin_menu .linklevel1:focus,
/* For secondary admin/profile/etc menus. */
#adm_submenus .linklevel1:hover, #adm_submenus .linklevel1:focus {
background: #fcfcfc;
background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); /* W3C */
color: #555;
border: 1px solid #afafaf;
border-top: 1px solid #bbb;
text-decoration: none;
}
/* Main menu Level 1 active button and hover need a different border. */
#main_menu .active, #main_menu .linklevel1:hover, #main_menu .listlevel:hover .linklevel1, #main_menu .linklevel1:focus {
border: 1px solid #38642d;
}
/* Level 1 active buttons for primary admin/profile/etc drop menus... */
.admin_menu .active,
/* ......and for secondary admin/profile/etc menu strip. */
#adm_submenus .active {
background: #4b863c;
background-image: linear-gradient(to bottom, #5BA048 0%, #3d6e32 100%); /* W3C */
color: #fff;
border: 1px solid #38642d;
}
/* Hover effects for those buttons. */
.admin_menu .active:hover, .admin_menu .listlevel1:hover .active, #adm_submenus .active:hover {
background: #437837;
color: #fff;
box-shadow: 1px 1px 1px rgba(0,0,0,0.3) inset;
border: 1px solid #5aa049;
border-left: 1px solid #2d5024;
border-top: 1px solid #2d5024;
}
/* Level 1 active buttons get a bit more weight. */
.active {
font-weight: 600;
}
/* Top level subsection indicators. */
/* Comment these out if you don't want them. */
#main_menu .subsections .linklevel1, .admin_menu .subsections .linklevel1 {
padding: 0 0.8em 0 0.5em;
}
#main_menu .subsections .linklevel1:after,.admin_menu .subsections .linklevel1:after {
content:" \2193";
position: absolute;
top: 0.5em;
right: 0.3em;
font-size: 1.3em;
}
/* Levels 2 and 3: drop menu wrapper. */
.menulevel2, .menulevel3 {
background: #fff;
border: 1px solid #aaa;
border-radius: 4px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}
/* Levels 2 and 3 drop menus: link or button. */
.linklevel2, .linklevel3 {
color: #555;
/* Applying a default transparent border stops links jumping on hover. */
border: 1px solid transparent;
border-radius: 3px;
}
/* Admin menu icons. */
.linklevel2>img {
vertical-align: middle;
margin: 0 0 0 -4px;
}
/* Levels 2 and 3: hover effects. */
.listlevel2:hover .linklevel2, /* linklevel2 highlighted with cursor over level 3. */
.linklevel2:hover, .linklevel2:focus, .linklevel2.sfhover:focus,
.linklevel3:hover, .linklevel3:focus, .linklevel3.sfhover:focus {
background: #fcfcfc;
background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); /* W3C */
color: #555;
border: 1px solid #afafaf;
border-top: 1px solid #bbb;
text-decoration: none;
}
/* Level 2: subsection indicators. */
.listlevel2.subsections .linklevel2:after {
content: "\2192";
position: absolute;
right: 6px;
font-size: 1.3em;
color: #777;
}
/* Levels 2 and 3: highlighting of current section */
/* @todo - This should probably be applied to main menu as well, just for consistency. */
.linklevel2.chosen, .linklevel3.chosen {
font-weight: 600;
}
/* Styles for sidebar menus.
------------------------------------------------------- */
/* Same styling for Level 1 and Level 2. */
#menu_sidebar .linklevel1, #menu_sidebar .linklevel2 {
color: #555;
border: 1px solid transparent;
}
#menu_sidebar .linklevel1:hover, #menu_sidebar .linklevel1:focus, #menu_current_area .linklevel1,
#menu_sidebar .linklevel2:hover, #menu_sidebar .linklevel2:focus {
background: #fcfcfc;
background-image: linear-gradient(to bottom, #fcfcfc 0%, #e5e5e5 100%); /* W3C */
color: #555;
border: 1px solid #afafaf;
border-top: 1px solid #bbb;
border-radius: 3px;
text-decoration: none;
}
#menu_current_area .linklevel1 {
font-weight: 600;
}
/* Level 1: subsection indicators. */
#menu_sidebar .listlevel1.subsections .linklevel1:after {
content: "\2192";
position: absolute;
right: 6px;
}
/*End sidebar flyout coding. */
_basic.css (teh boilerplate version)
/* This variant is a very basic, boilerplate version of the default theme. */
/* It is intended primarily as a "clean slate" for custom theming. */
/* This variant uses named colours instead of hex codes, to make things easier for beginners. */
/* A complete list of CSS colour names can be found at http://www.w3schools.com/cssref/css_colornames.asp */
/* ----------------------------------------------------------- */
/* This is eye candy only. All the layout code is in index.css. */
/* NOTE: The layout code in index.css should NOT be altered
/* unless you are really sure of what you are doing.
/* ALL variants depend on the basic layout code for stability. */
/* ----------------------------------------------------------- */
/* Styles for the standard dropdown menus.
----------------------------------------------------------- */
/* Visible menu bar: wrapper/background. */
#main_menu {
background: forestgreen;
}
/* Needed for new PM notifications. */
.listlevel1 strong {
color: white;
}
/* Level 1 Menu bar: link or button. */
/* If there will be a border on hover, have a border here. */
/* A default transparent border stops links jumping on hover. */
#main_menu .linklevel1, .admin_menu .linklevel1, #adm_submenus .linklevel1 {
border: 1px solid transparent;
color: white;
}
/* Override link colour for admin/profile/etc menus. */
.admin_menu .linklevel1, #adm_submenus .linklevel1 {
color: black;
}
/* Level 1 button hover and focus effects. */
#main_menu .active, /* Level 1 active button shares same styling. */
#main_menu .linklevel1:hover, #main_menu .listlevel:hover .linklevel1, #main_menu .linklevel1:focus,
/* For primary admin/profile/etc drop menus. */
.admin_menu .linklevel1:hover, .admin_menu .linklevel1:focus,
/* For secondary admin/profile/etc menus. */
#adm_submenus .linklevel1:hover, #adm_submenus .linklevel1:focus {
background: gainsboro /* This is a pale grey. */;
color: black;
border: 1px solid darkgray;
text-decoration: none;
}
/* Main menu Level 1 active button and hover need a different border. */
#main_menu .active, #main_menu .linklevel1:hover, #main_menu .listlevel:hover .linklevel1, #main_menu .linklevel1:focus {
border: 1px solid black;
}
/* Level 1 active buttons for primary admin/profile/etc drop menus... */
.admin_menu .active,
/* ......and for secondary admin/profile/etc menu strip. */
#adm_submenus .active {
background: forestgreen;
color: white;
border: 1px solid black;
}
/* Hover effects for those buttons. */
.admin_menu .active:hover, .admin_menu .listlevel1:hover .active, #adm_submenus .active:hover {
background: darkgreen;
color: white;
border: 1px solid black;
}
/* Level 1 active buttons get a bit more weight. */
.active {
font-weight: bold;
}
/* Top level subsection indicators. */
/* Comment these out if you don't want them. */
#main_menu .subsections .linklevel1, .admin_menu .subsections .linklevel1 {
padding: 0 0.8em 0 0.5em;
}
#main_menu .subsections .linklevel1:after,.admin_menu .subsections .linklevel1:after {
content:" \2193";
position: absolute;
top: 0.5em;
right: 0.3em;
font-size: 1.3em;
}
/* Levels 2 and 3: drop menu wrapper. */
.menulevel2, .menulevel3 {
background: white;
border: 1px solid darkgray;
}
/* Levels 2 and 3 drop menus: link or button. */
.linklevel2, .linklevel3 {
color: black;
/* Applying a default transparent border stops links jumping on hover. */
border: 1px solid transparent;
}
/* Admin menu icons. */
.linklevel2>img {
vertical-align: middle;
margin: 0 0 0 -4px;
}
/* Levels 2 and 3: hover effects. */
.listlevel2:hover .linklevel2, /* < highlighted with cursor over level 3. */
.linklevel2:hover, .linklevel2:focus, .linklevel2.sfhover:focus,
.linklevel3:hover, .linklevel3:focus, .linklevel3.sfhover:focus {
background: gainsboro;
color: black;
border: 1px solid darkgray;
text-decoration: none;
}
/* Level 2: subsection indicators. */
.listlevel2.subsections .linklevel2:after {
content: "\2192";
position: absolute;
right: 6px;
font-size: 1.3em;
color: black;
}
/* Levels 2 and 3: highlighting of current section */
.linklevel2.chosen, .linklevel3.chosen {
font-weight: bold;
}
/* Styles for sidebar menus.
------------------------------------------------------- */
/* Same styling for Level 1 and Level 2. */
#menu_sidebar .linklevel1, #menu_sidebar .linklevel2 {
color: black;
border: 1px solid transparent;
}
#menu_sidebar .linklevel1:hover, #menu_sidebar .linklevel1:focus, #menu_current_area .linklevel1,
#menu_sidebar .linklevel2:hover, #menu_sidebar .linklevel2:focus {
background: gainsboro;
color: black;
border: 1px solid darkgray;
text-decoration: none;
}
#menu_current_area .linklevel1 {
font-weight: bold;
}
/* Level 1: subsection indicators. */
#menu_sidebar .listlevel1.subsections .linklevel1:after {
content: "\2192";
position: absolute;
right: 6px;
}
/*End sidebar flyout coding. */
Given the complexity of multi-level drop menu coding, and taking into account the choice between drops or sidebar, I think this is close to as simple as we can make it.
Modern, Free, Powerful