Change Top Menu and Fix Css Menu

[senyor35]

Hi. I want to change top menu and fix this menu css menu from dynamic drive. I am using 2.0.7 version. How can I fix it please? Thanks...

[Antechinus]

Meh. You don't need anything from DD. It's just a box-shadow change on hover. Heaps of themes use that sort of thing. You can style the buttons any way you like. You could make that code considerably simpler too.

Figure out what colours you want and what shape you want the buttons to have. Do you want it to look exactly the same, or do you want to change it a bit?

[senyor35]

Meh. You don't need anything from DD. It's just a box-shadow change on hover. Heaps of themes use that sort of thing. You can style the buttons any way you like. You could make that code considerably simpler too.

Figure out what colours you want and what shape you want the buttons to have. Do you want it to look exactly the same, or do you want to change it a bit?

Thank you Antechinus. I want exactly that menu...

[Antechinus]

Ok. You can do it all with CSS changes, but you have to override the default CSS, and there's a fair bit that needs changing. I'll take a look at it tonight (don't have time this morning).

[Antechinus]

Ok, I've made up the code for just the main menu, leaving the other menus (like in admin, etc) the same as default. You can change those too if you like, but I haven't.

I also haven't added icons to any buttons, but that's not hard to do either once you have the images (there aren't any suitable images in default).

Open your index.css and find this:

Code Select Expand

/* the background's first level only */
.dropmenu li a.firstlevel
{
margin-right: 8px;
}
.dropmenu li a.firstlevel span.firstlevel
{
display: block;
position: relative;
left: -5px;
padding-left: 5px;
height: 22px;
line-height: 19px;
white-space: pre;
}
.dropmenu li
{
float: left;
padding: 0;
margin: 0;
position: relative;
}
.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
width: 19.2em;
font-weight: normal;
border-bottom: 1px solid #999;
background: url(../images/theme/menu_gfx.png) 0 -130px no-repeat;
padding: 7px 0 0 0;
}
.dropmenu li li
{
width: 19em;
margin: 0;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.dropmenu li li a span
{
display: block;
padding: 8px;
}
.dropmenu li ul ul
{
margin: -1.8em 0 0 13em;
}

/* the active button */
.dropmenu li a.active
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% 0;
color: #fff;
font-weight: bold;
}
.dropmenu li a.active span.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
}
/* the hover effects */
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -30px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 -30px;
}


Replace all of that with this:

Code Select Expand

/* the background's first level only */
a.firstlevel
{
margin-right: 8px;
}
#menu_nav a.firstlevel
{
margin-right: 0;
}
a.firstlevel>.firstlevel
{
display: block;
position: relative;
left: -5px;
padding-left: 5px;
height: 22px;
line-height: 19px;
white-space: pre;
}
#menu_nav a.firstlevel>.firstlevel
{
left: 0;
padding: 0 10px;
height: 2.3em;
font-size: 1em;
line-height: 2.3em;
background : #fff;
border: 1px solid #ccc;
box-shadow: -3px 0 8px #ccc inset;
/* Enable CSS transition between property changes */
transition: box-shadow 0.2s ease-in-out;
}
.dropmenu li
{
float: left;
padding: 0;
margin: 0;
position: relative;
}
.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
width: 19.2em;
font-weight: normal;
border-bottom: 1px solid #999;
background: url(../images/theme/menu_gfx.png) 0 -130px no-repeat;
padding: 7px 0 0 0;
}
.dropmenu li li
{
width: 19em;
margin: 0;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.dropmenu li li a span
{
display: block;
padding: 8px;
}
.dropmenu li ul ul
{
margin: -1.8em 0 0 13em;
}

/* the active button */
.dropmenu>li>.active
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% 0;
color: #fff;
font-weight: bold;
}
.dropmenu>li>.active>.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
}
#menu_nav>li>.active, #menu_nav>li>.active>.firstlevel
{
background: #fff;
color: #1e6d8c;
font-weight: bold;
box-shadow: -3px 0 8px #d0d0d0 inset;
/* Enable CSS transition between property changes */
transition: box-shadow 0.2s ease-in-out;
}
/* the hover effects */
a.firstlevel:hover, .dropmenu li:hover>.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -30px;
color: #fff;
cursor: pointer;
text-decoration: none;
}
#menu_nav a.firstlevel:hover, #menu_nav li:hover>.firstlevel
{
background: none;
color: #000;
}
a.firstlevel:hover>.firstlevel, .dropmenu li:hover>.firstlevel>.firstlevel
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 -30px;
}
#menu_nav a.firstlevel:hover>.firstlevel, #menu_nav li:hover>.firstlevel>.firstlevel
{
background: #fff;
box-shadow: -2px 0 10px #68c4f1 inset;
/* Enable CSS transition between property changes */
transition: box-shadow 0.2s ease-in-out;
}


This new code puts each modification for the new main menu after the same code for the other menus, so you can compare the two.