SitePoint Sponsor

User Tag List

Results 1 to 25 of 29

Threaded View

  1. #1
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop-Down Menu giving me some trouble - RokNavMenu for Joomla!

    Hi all,

    Good to be back!!! Been a looooooooooooong time since I did any web-work and hit SitePoint as a result.

    I am working on a new site for our local youth baseball league. End result won't be insanely fancy. Test site is here:

    http://joomlatest.chrisbartlett.net/

    What I am trying to do is get an operational drop-down menu at the top. You can see it in all it's not-so-operational glory. LOL! To do this, I installed a module called RokNavMenu:

    http://www.rockettheme.com/extensions-joomla/roknavmenu

    If you would, please look at the two attached screenshots. One is the menu when set to "default". This is actually the look I prefer, but as you can see in "Contact" for example, the sub-menus appear without need to hover to get them. The 2nd screenshot is with the style set to "Fusion". This actually works (sort of), but as you can see, the whole thing gets thrown to the right.

    I cannot seem to find any way IN the Joomla Administrator to edit CSS or any of the files associated with this module, but via FTP, I found this CSS file related to "Fusion".

    Code:
    body {font-family:Helvetica,Arial,sans-serif;font-size:12px;}
    
    /* CORE */
    
    .menutop,.menutop * {margin:0;padding:0;}
    .menutop {float:left;position:relative;padding-bottom:2px;}
    .menutop li {list-style:none;position:relative;width:100%;height:25px;float:none;}
    .menutop li a.item {cursor:pointer;}
    .menutop li span.item {cursor:default;outline:none;}
    .menutop li .item {display:block;float:left;display:block;margin:0;height:25px;line-height:25px;}
    .menutop li li .item, 
    .menutop li .item, .menutop li.active li .item {display:block;margin:0;text-decoration:none;float:none;}
    .menutop li .fusion-submenu-wrapper, .menutop li ul {float: none;left: -999em;position: absolute;z-index: 500;}
    .menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
    .menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
    .menutop li li {position:relative;float:none;}
    
    /* Drop Downs */
    .menutop ul {width:175px;position:relative;}
    
    /* Level 1 */
    .menutop li .item {text-decoration:none;display:block;padding:0 15px;background:#ddd;border-color:#eee #ccc #ccc #eee;border-style:solid;border-width:1px;color:#333333;text-decoration:none;}
    
    .level1 .f-mainparent-itemfocus .item {background:#ccc 100% 100% no-repeat;border-color:#ddd #bbb #bbb #ddd;border-style:solid;border-width:1px;}
    
    .menutop li:hover > .item {background-color:#ccc;border-top:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #bbb;border-bottom:1px solid #bbb;}
    .menutop li:hover > .daddy:hover {background-image:url(../images/top-light.png);background-position: 100% 100%;}
    
    /* Level 2 */
    .menutop .level2 li > .item {background:#ccc;border-color:#ddd #bbb #bbb #ddd;border-style:solid;border-width:1px;}
    .menutop .level2 li:hover > .daddy, .menutop .level2 li > .daddy {background-image:url(../images/level2-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    .menutop .level2 .f-menuparent-itemfocus .item, .menutop .level2 li:hover .item {background:#bbb;border-color:#ccc #aaa #aaa #ccc;color:#333;}
    .menutop .level2 .f-menuparent-itemfocus .daddy, .menutop .level2 li:hover .daddy {background-image:url(../images/level3-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    
    /* Level 3 */
    .menutop .level3 li > .item {background:#bbb;border-color:#ccc #aaa #aaa #ccc;border-style:solid;border-width:1px;}
    .menutop .level3 li:hover > .daddy, .menutop .level3 li > .daddy {background-image:url(../images/level3-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    .menutop .level3 .f-menuparent-itemfocus .item, .menutop .level3 li:hover .item {background:#aaa;border-color:#bbb #999 #999 #bbb;color:#333;}
    .menutop .level3 .f-menuparent-itemfocus .daddy, .menutop .level3 li:hover .daddy {background-image:url(../images/level4-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    /* Level 4 */
    .menutop .level4 li > .item {background:#aaa;border-color:#bbb #999 #999 #bbb;border-style:solid;border-width:1px;}
    .menutop .level4 li:hover > .daddy, .menutop .level4 li > .daddy {background-image:url(../images/level4-parent.png);background-position:100% 50%;background-repeat:no-repeat;}
    
    .menutop .level4 .f-menuparent-itemfocus .item, .menutop .level4 li:hover .item {background:#999;border-color:#aaa #888 #888 #aaa;color:#333;}
    
    /* regular hover */
    .menutop li:hover .item:hover, .menutop li.active .item:hover  {background-color:#2c87c0;border-top:1px solid #138fdc;border-left:1px solid #138fdc;border-right:1px solid #0d5f92;border-bottom:1px solid #0d5f92;color:#fff}
    .menutop li:hover .daddy:hover, .menutop ul li.active:hover > .daddy:hover {background-image:url(../images/hover-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}
    
    /* seperator hover */
    .menutop span.item:hover,
    .menutop li:hover span.item:hover {background-color:#666;border-top:1px solid #777;border-left:1px solid #777;border-right:1px solid #555;border-bottom:1px solid #555;color:#fff}
    .menutop li:hover span.daddy:hover {background-image:url(../images/sep-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}
    
    /* Root Items */
    .menutop li.root {width:auto;float:left;height:30px;} 
    .menutop li.root > .item {float:left;width: auto;height:30px;line-height:30px;}
    .menutop li.root:hover > .daddy:hover {background-image:url(../images/top-light.png);background-position: 100% 100%;}
    .menutop li.root > .daddy, .menutop li.root:hover > .daddy {background-image: url(../images/top-dark.png); background-position: 100% 100%; background-repeat: no-repeat;}
    
    /* Active Items */
    .menutop li.active > .item {background-color:#EE501C;border-color:#F86134 #D24916 #D24916 #F86134;color:#fff;}
    .menutop li.active > .daddy {background-image:url(../images/active-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}
    .menutop li.root.active > .daddy, .menutop li.root.active:hover > .daddy {background-image:url(../images/top-light.png);background-position: 100% 100%;}
    
    
    /* No JS */
    .menutop li:hover > .fusion-submenu-wrapper, .menutop li:hover > ul {left:170px;top:0;}
    .menutop li.root:hover > .fusion-submenu-wrapper, .menutop li.root:hover > ul {top:32px;left:0;}
    .menutop li:hover ul, 
    .menutop li.sfHover ul {left: 0;top:32px;}
    .menutop ul {width:175px;}
    .menutop li li:hover > ul, .menutop li li.sfHover > ul {left:175px;top: 0;}
    
    .menutop .level2 li {position:relative;float:left;width:100%;}
    
    /* Fusion Pill */
    .fusion-pill-l {height: 35px;margin:0 0 0 12px;top:6px;width:50px;position:absolute;left:0;}
    .fusion-pill-r {margin-left: -12px;height: 35px;}
    
    /* Fusion JS */
    .fusion-js-container {display:block;height:0;left:0;overflow:visible;position:absolute;top:0;z-index:600000!important;background:transparent !important;}
    .fusion-js-subs {display:none;margin:0 0 0 -2px;overflow:hidden;padding:0 2px;position:absolute;}
    It's been nearly 7 years since I played with CSS code, and while this is not completely foreign to me, it's certainly not as obvious as it used to be. Truth be told, I don't even know if the trouble I'm having is even CSS-related. But I suspect so.

    Can someone give me a hand, please? Ultimately, what I would like is for the "Default" style to work. But anything functional will do. Thanks!!!

    Chris
    Attached Images Attached Images


Bookmarks

Posting Permissions

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