Results 1 to 8 of 8
  1. #1
    Join Date
    Jul 2009
    Posts
    13
    Plugin Contributions
    0

    Default 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 :
    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

  2. #2
    Join Date
    Jul 2009
    Posts
    13
    Plugin Contributions
    0

    Default Re: Adding nice buttons to css flyout menu

    Any ideas? Thanks

  3. #3
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default 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
    Zen-Venom Get Bitten

  4. #4
    Join Date
    Jul 2009
    Posts
    13
    Plugin Contributions
    0

    Default 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. #5
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default 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
    Code:
    div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}
    Zen-Venom Get Bitten

  6. #6
    Join Date
    Jul 2009
    Posts
    13
    Plugin Contributions
    0

    Default 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. #7
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: Adding nice buttons to css flyout menu

    Give it a width in the stylesheet
    Zen-Venom Get Bitten

  8. #8
    Join Date
    Jul 2009
    Posts
    13
    Plugin Contributions
    0

    Default Re: Adding nice buttons to css flyout menu

    Man, your help was outstanding. I managed to put custom images 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

 

 

Similar Threads

  1. layout changed after installed CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)
    By cmike in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 20 Feb 2014, 04:02 PM
  2. v151 How to uninstall CSS Horizontal Drop Down Menu (CSS Flyout Header 1.5)
    By cmike in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 15 Feb 2014, 07:39 AM
  3. CSS Menu Flyout
    By movie in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 21 Aug 2006, 06:17 PM
  4. CSS-Flyout menu
    By hennie in forum All Other Contributions/Addons
    Replies: 0
    Last Post: 7 Jul 2006, 08:28 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg