Web Hosting
Results 1 to 3 of 3
  1. #1
    Join Date
    Nov 2012
    Posts
    2

    Default Custom Made Drop down Menu is not working in Joomla

    The following drop down works perfectly fine when I run it just by including the file in joomla index page, OR even I've tried it outside the joomla it works fine, I've made a drop down menu module, but when i apply this style sheet via a module the drop down portion of this stylesheet does'nt work, I really can't sort this out, can please some one help me.

    Stylesheet:

    #menu
    {
    background-color:#3f4962;
    list-style:none;
    /*
    width:60px;
    height:40px;
    */
    position:relative;
    margin:0px 5px 0px 0px;
    padding:0px;
    color:#000;
    float:left;

    /* border: 1px solid #002232; */
    }

    #menu li
    {
    float:left;
    display:block;
    text-align:left;
    position:relative;
    /*
    padding: 6px 14px 6px 14px;
    */

    /*
    margin-right:6px;
    margin-top:7px;
    */
    border: 1px solid #3f4962;

    }

    #menu li a
    {
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    display:block;
    text-decoration: none;
    border:none;


    padding: 8px 12px 8px 10px;
    }

    #menu li:hover
    {
    /* padding: 6px 13px 6px 13px; */
    background:#ffffff;
    border:1px solid #3F4962;

    /* Rounded corners */
    /*-moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;*/
    }

    #menu li:hover a
    {
    color:#3f4962;
    font-weight:bold;
    border:none;
    }

    #menu li ul.level_1
    {
    margin:0px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;

    /* padding:2px 2px 2px 2px; */
    /* padding:10px 5px 10px 5px; */
    padding:0;

    border:1px solid #3f4962;
    border-top:none;

    /* width:800px;*/

    /* Rounded corners */

    /*-moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;*/

    /* Gradient background */
    background:#ffffff;
    background: -moz-linear-gradient(top, #ffffff, #dedfe2);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#dedfe2));
    }

    #menu li:hover ul.level_1
    {
    left:-1px;
    top:auto;
    }

    #menu li:hover ul.level_1 div
    {
    float:left;
    /* padding:0; */
    margin:0;
    padding:2px 2px 2px 2px;

    width:748px;

    /* border:1px solid #0CF; */
    }

    #menu li:hover ul div li.col_1
    {
    background:none;
    /* line-height:8px; */
    display:inline;

    float: left;

    /*position: relative;
    margin-left:1px;
    margin-right:1px;
    margin-bottom:5px; */

    border:none;
    /*width:120px;*/
    padding:0;
    margin:5px 0px 5px 5px;

    /* border:1px solid #000000; /* remove this */

    }

    #menu li:hover ul div li a
    {
    color:#3f4962;

    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    display:block;
    text-decoration: none;

    border:none;

    margin:0;
    padding:2px 2px 2px 2px;

    /* border:1px solid #0F3; /* remove this */
    }

    #menu li:hover ul div li ul.level_2
    {
    display:inline;
    float: left;
    position: relative;
    margin-left: 0px;

    border:none;

    /* border:1px solid #000000; /* remove this */

    }

    #menu li:hover ul div li ul li
    {
    background:none;
    /* float:left;*/
    float:none;
    line-height:18px;

    /*padding:0;
    margin:0; */

    text-align:left;

    width:180px;

    position:relative;
    padding:0;
    margin:0;
    border:none;

    /* border:1px solid #000000; /* remove this */
    }

    #menu li:hover ul div li ul li a
    {
    color:#3f4962;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:lighter;
    display:block;
    text-decoration:none;

    border:none;
    padding:2px 2px 2px 2px;
    }

    #menu li:hover ul div li ul li a:hover
    {
    text-decoration:underline;
    }




    Apply Manually:

    <ul id="menu" class="level_0">
    <li>
    <a href="#">Boilers</a>

    <ul class="level_1">
    <div>
    <li class="col_1">
    <a href="#">Vaillant</a>

    <ul class="level_2">
    <li><a href="#">Condensing Combination Boilers</a></li>
    <li><a href="#">Condensing Conventional Boilers</a></li>
    <li><a href="#">Condensing System Boilers</a></li>
    <li><a href="#">Accessories</a></li>
    </ul>
    </li>

    <li class="col_1">
    <a href="#">Glow-worm</a>

    <ul class="level_2">
    <li><a href="#">Glow-worm Condensing Combination</a></li>
    <li><a href="#">Glow-worm Condensing Conventional</a></li>
    <li><a href="#">Glow-worm Condensing Systems</a></li>
    </ul>
    </li>


    <li class="col_1">
    <a href="#">Worcester</a>

    <ul class="level_2">
    <li><a href="#">Worcester Condensing Combination</a></li>
    <li><a href="#">Worcester Condensing Conventional</a></li>
    <li><a href="#">Worcester Condensing System</a></li>
    </ul>
    </li>

    <li class="col_1">
    <a href="#">Baxi</a>

    <ul class="level_2">
    <li><a href="#">Baxi Condensing Combination Boilers</a></li>
    <li><a href="#">Baxi Condensing Conventional Boilers</a></li>
    <li><a href="#">Baxi Condensing System Boilers</a></li>
    <li><a href="#">Baxi Accressories</a></li>
    </ul>
    </li>
    </div>

    <div>
    <li class="col_1">
    <a href="#">Vaillant</a>

    <ul class="level_2">
    <li><a href="#">Condensing Combination Boilers</a></li>
    <li><a href="#">Condensing Conventional Boilers</a></li>
    <li><a href="#">Condensing System Boilers</a></li>
    <li><a href="#">Accessories</a></li>
    </ul>
    </li>

    <li class="col_1">
    <a href="#">Glow-worm</a>

    <ul class="level_2">
    <li><a href="#">Glow-worm Condensing Combination</a></li>
    <li><a href="#">Glow-worm Condensing Conventional</a></li>
    <li><a href="#">Glow-worm Condensing Systems</a></li>
    </ul>
    </li>


    <li class="col_1">
    <a href="#">Worcester</a>

    <ul class="level_2">
    <li><a href="#">Worcester Condensing Combination</a></li>
    <li><a href="#">Worcester Condensing Conventional</a></li>
    <li><a href="#">Worcester Condensing System</a></li>
    </ul>
    </li>

    <li class="col_1">
    <a href="#">Baxi</a>

    <ul class="level_2">
    <li><a href="#">Baxi Condensing Combination Boilers</a></li>
    <li><a href="#">Baxi Condensing Conventional Boilers</a></li>
    <li><a href="#">Baxi Condensing System Boilers</a></li>
    <li><a href="#">Baxi Accressories</a></li>
    </ul>
    </li>
    </div>

    </ul>

    </li>
    </ul>



    Joomla Module Funciton:

    function getcategorytree($category_array, $parent, $level)
    {

    $children = false;

    if($level === 1)
    {
    $i = 4;
    }

    /* Loop start */
    foreach($category_array as $Key => $value)
    {

    /* If start */
    if($value['pid'] == $parent)
    {
    if($children === false)

    {
    $children = true;

    $category_output .= '<ul class="level_'.$level.'"';


    if($level === 0)
    {
    $category_output .= ' id="menu" '; /* .$params->get('tag_id', 'jl_vm_cat').'"'; */
    }

    $category_output .= '>';


    $level++;

    }

    if($level === 2 && $i === 4)
    {
    $category_output .= '<div>';
    }


    $category_output .= '<li ';

    if($level === 2)
    {
    $category_output .= ' class="col_1" ';
    }

    $category_output .= '>';

    $link = JRoute::_('index.php?option=com_virtuemart&amp;pag e=shop.browse&amp;category_id='.$value['id']);

    $category_output .=JHTML::link($link, $value['name'],'title="'.$value['name'].'"');

    if($level === 2)
    {
    $i--;
    }

    $loop++;

    $category_output .= self::getcategorytree($category_array, $Key, $level);

    if($level === 2)
    {
    if($i === 0)
    {
    $category_output .= '</div>';
    $i = 4;
    }
    }

    $category_output .='</li>';
    }
    /* If closed */
    }
    /* Loop closed */

    if ($children === true)
    {
    $category_output .='</ul>';
    }


    return $category_output;
    }

  2. #2
    Join Date
    Apr 2008
    Location
    At home
    Posts
    908

    Default

    Hi,

    I am afraid I cannot help you only by looking at these sources. Please give me the URL of your website with the menu added to it and I will do my best to provide you with solution to your issue.

  3. #3
    Join Date
    Nov 2012
    Posts
    2

    Default

    I've sent you a private message about the URL and all the details, please check, thank you for helping out.

Similar Threads

  1. Drop Down Menu
    By blizz-craft in forum Other Software and Applications
    Replies: 1
    Last Post: 03-23-2012, 04:10 AM
  2. Replies: 34
    Last Post: 02-17-2012, 05:18 PM
  3. Help with a drop-down menu
    By imax in forum Free Joomla Templates
    Replies: 7
    Last Post: 11-18-2011, 09:28 AM
  4. 15-1 top drop down menu
    By merchiston in forum Free Joomla Templates
    Replies: 2
    Last Post: 10-06-2009, 12:27 PM
  5. Replies: 1
    Last Post: 08-13-2009, 05:49 AM

Tags for this Thread

Posting Permissions

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