Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Adding nice buttons to css flyout menu

Adding nice buttons to css flyout menu

Locked

Views: 2,416

Results 1 to 8 of 8
This thread is locked. New replies are disabled.
3 Oct 2009, 9:36 AM
#1
thunder11 avatar

thunder11

New Zenner

Join Date:
Jul 2009
Posts:
13
Plugin Contributions:
0

Adding nice buttons to css flyout menu

Im not sure if this is the right place to post the problem I have. I would like to put nice buttons on Flayout menu I have on my store located here :
https://www.perun.rs
Is it possible. Right now the menu looks like this

but I want to add a button like this :

for all sections : Home, Audio/Video, Knjige, Aparati za kuću and Informacije

thanks in advance :D

4 Oct 2009, 11:17 PM
#2
thunder11 avatar

thunder11

New Zenner

Join Date:
Jul 2009
Posts:
13
Plugin Contributions:
0

Re: Adding nice buttons to css flyout menu

Any ideas? Thanks

4 Oct 2009, 11:29 PM
#3
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Adding nice buttons to css flyout menu

Add to your stylesheet either
#navCatTabsWrapper li or #navCatTabsWrapper ul li

Give it a background image - a blank button as the text will already be present
Probably a width & height to match image

5 Oct 2009, 12:39 PM
#4
thunder11 avatar

thunder11

New Zenner

Join Date:
Jul 2009
Posts:
13
Plugin Contributions:
0

Re: Adding nice buttons to css flyout menu

Thanks Kobra,
I hope Im not asking too much but what line should I add and where. Here is a code of my flyout menu.
stylesheet_header_menu.css :
body {
behavior: url(includes/csshover.htc);
}

/green/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #000000!important;background:#FFFBEF;}
div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/

/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/

#dropMenuWrapper {
width:100%;
height:25px;
margin:0;
font-size:11px;
}

div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0;
padding: 0;
}

div#dropMenu li {
position: relative;
list-style: none;
margin: 0;
float: left;
line-height: 1em;
}

div#dropMenu ul.level1 {
width:750px;
margin:0 auto;
text-align:center;
background:#ffffff;
height:25px;
z-index:1000;
}

div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; text-transform:uppercase; color:#000000; text-align:center; border-right:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#FFEECB;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#FFFFFF}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: black; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#FFFFFF;}

Many thanks

5 Oct 2009, 2:01 PM
#5
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Adding nice buttons to css flyout menu

Thought those were the default navcat tabs...

It looks like div#dropMenu li would be where you would add the image

Similar to how it is already called for the sub cats

div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}
7 Oct 2009, 7:20 AM
#6
thunder11 avatar

thunder11

New Zenner

Join Date:
Jul 2009
Posts:
13
Plugin Contributions:
0

Re: Adding nice buttons to css flyout menu

Many thanks Kobra. Sorry for not replying earlier. You pointed me to the right direction. Right now, Im working on how to set picture size. It seems that my css file shorten supplied images and it looks kind of ugly. I will have to work on that. If you have any ideas please tell me.
Thanks again

thunder11

7 Oct 2009, 7:22 AM
#7
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Location:
Arizona
Posts:
31,500
Plugin Contributions:
4

Re: Adding nice buttons to css flyout menu

Give it a width in the stylesheet

7 Oct 2009, 8:01 PM
#8
thunder11 avatar

thunder11

New Zenner

Join Date:
Jul 2009
Posts:
13
Plugin Contributions:
0

Re: Adding nice buttons to css flyout menu

Man, your help was outstanding. I managed to put custom images :D Not sure how it looks on IE since Im using Linux. Only thing that left was that I was unable to put image under section : AUDIO/VIDEO . I played with that one for 2 hours and nothing.
Many thanks Kobra. I hope I will repay you for all your efforts. Thanks