Help: how to make drop downs from horisontal menu in template

webtytte · 25.07.2006, 11:44

Hi,

I am using a template called "Akowinterportal" (from here). It has a "built in" horizontal menu in the top, however it doesnt show sub-links to menuitems.

I would like it to make a drop down when hoovering with the mouse over a menuitem. Can someone help me with this or guide me to a place that can?

I have posted the code I believe is the one to modify from the index.php of the template:

Code:

      <?php

        # Vertical Menu V2.1 - by Arthur Konze - www.mamboportal.com

        $database->setQuery("SELECT id, name, link FROM #__menu WHERE menutype='mainmenu' AND parent='0' AND access<='$gid' AND sublevel='0' AND published='1' AND type<>'separator' ORDER BY ordering");

        $vmrows = $database->loadObjectList();

        echo "<table border='0' cellpadding='0' cellspacing='2' width='75%'><tr>";

        $num_vmrows  = count($vmrows);

        $vmtab_width = floor(100 / $num_vmrows);

        foreach($vmrows as $vmrow) {

          echo "<td width='$vmtab_width%'><a href='".sefRelToAbs("$vmrow->link&Itemid=$vmrow->id")."' class='buttonbar'>$vmrow->name</a></td>";

        }

        echo "</tr></table>";

      ?>

An this is from the CSS file of the template:

Code:

/* ###################### UPPER BUTTON BAR ###################### */
.buttonbar {
  display          : block;
  font-family      : Arial, Helvetica, serif;
  width            : 100%;
  text-align       : center;
  font-weight      : normal;
  text-decoration  : none;
}

a.buttonbar:link, a.buttonbar:visited {
  font-size        : 9px;
  padding-top      : 1px;
  padding-bottom   : 1px;
  text-decoration  : none;
  border-top       : 1px solid #95BFD1;
  border-left      : 1px solid #95BFD1;
  border-right     : 1px solid #427D96;
  border-bottom    : 1px solid #427D96;
  background-color : #50A9DC;
  color            : #FFFFFF
}
a.buttonbar:hover {
  padding-top      : 1px;
  padding-bottom   : 1px;
  border-top       : 1px solid #427D96;
  border-left      : 1px solid #427D96;
  border-right     : 1px solid #95BFD1;
  border-bottom    : 1px solid #95BFD1;
  background-color : #308CC0;
  color            : #FFFFFF
}

/* ################ MAIN AND SUB MENU SYSTEM ################ */
a.mainlevel:link, a.mainlevel:visited {
  color            : #808080;
}

a.mainlevel:hover {
  color            : #7DB1C7;
}

Alternatively I also use the component "Extended menu" but I havent figured out how to make a horizontal menu in that component. If anyone can guide me to an understandable guide I would be very happy - as it might work as an alternative to the above solution?

In the hopes of some assistance...

Kind regards

Webtytte