Dropdown Main Menu for PDX Theme

[yol]

Hello, this is my mouseover dropdown menu for PDX Theme. You can customize for you, its very simple and very useful for who need the much more button for links...

find this codes in index.template.php

// Show the [home] button.
   echo ($current_action=='home' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'home' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '">' , $txt['pdx_forum_button_forum'] , '</a>
            </div>' , $current_action == 'home' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';
   }
   else
   {
// Show the [forum] button.
   echo ($current_action=='home' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'home' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '">' , $txt[103] , '</a>
            </div>' , $current_action == 'home' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';

   }

// Is the user allowed to administrate at all? ([admin])
   if ($context['allow_admin'])
      echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'admin' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=admin">' , $txt[2] , '</a>
            </div>' , $current_action == 'admin' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';
            
            // Go to PM center... [pm]
   if ($context['user']['is_logged'] && $context['allow_pm'])
      echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'pm' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=pm">' , $txt['pm_short'] , ' ', $context['user']['unread_messages'] > 0 ? '[<strong>'. $context['user']['unread_messages'] . '</strong>]' : '' , '</a>
            </div>' , $current_action == 'pm' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';

// Edit Profile... [profile]
   if ($context['allow_edit_profile'])
      echo ($current_action == 'profile' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'profile' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=profile">' , $txt[79] , '</a>
            </div>' , $current_action == 'profile' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';
            
// The [calendar]!
   if ($context['allow_calendar'])
      echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=calendar">' , $txt['calendar24'] , '</a>
            </div>' , $current_action == 'calendar' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';
            
// The [weather cast]!
   if ($context['allow_calendar'])
      echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?topic=365.0">' , 'METEOROLOJI' , '</a>
            </div>' , $current_action == 'calendar' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';
            
            // The [Sponsors]!
   if ($context['allow_calendar'])
      echo ($current_action == 'calendar' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'calendar' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?board=50.0">' , 'SPONSORLAR' , '</a>
            </div>' , $current_action == 'calendar' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';
            
            // the [member] list button
   if ($context['allow_memberlist'])
      echo ($current_action == 'mlist' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'mlist' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=mlist">' , $txt[331] , '</a>
            </div>' , $current_action == 'mlist' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';

            // Show the [help] button.
   echo ($current_action == 'help' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'help' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=help">' , $txt[119] , '</a>
            </div>' , $current_action == 'help' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';
            
            // The [contact]!
   if ($context['allow_view_contact'])
      echo ($current_action == 'contact' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'contact' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=contact">' , 'İLETİŞİM' , '</a>
            </div>' , $current_action == 'contact' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';

// Otherwise, they might want to [logout]...
   if ($context['user']['is_logged'])
      echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '' : '' , '
            <div class="maintab_' , $current_action == 'logout' ? 'active_back' : 'back' , '">
               <a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">' , $txt[108] , '</a>
            </div>' , $current_action == 'logout' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';

// The end of tab section.
}

replace with this...

echo "<script type=\"text/javascript\">\n";
echo "Created by: SEDAT AÇIL */\n";
echo "var TimeOut         = 300;\n";
echo "var currentLayer    = null;\n";
echo "var currentitem     = null;\n";
echo "var currentLayerNum = 0;\n";
echo "var noClose         = 0;\n";
echo "var closeTimer      = null;\n";

echo "function mopen(n) {\n";
echo "  var l  = document.getElementById(\"menu\"+n);\n";
echo "  var mm = document.getElementById(\"mmenu\"+n);\n";

echo "  if(l) {\n";
echo "    mcancelclosetime();\n";
echo "    l.style.visibility='visible';\n";
echo "    if(currentLayer && (currentLayerNum != n))\n";
echo "      currentLayer.style.visibility='hidden';\n";
echo "    currentLayer = l;\n";
echo "    currentitem = mm;\n";
echo "    currentLayerNum = n;         \n";
echo "  } else if(currentLayer) {\n";
echo "    currentLayer.style.visibility='hidden';\n";
echo "    currentLayerNum = 0;\n";
echo "    currentitem = null;\n";
echo "    currentLayer = null;\n";
echo "    }\n";
echo "}\n";

echo "function mclosetime() {\n";
echo "  closeTimer = window.setTimeout(mclose, TimeOut);\n";
echo "}\n";

echo "function mcancelclosetime() {\n";
echo "  if(closeTimer) {\n";
echo "    window.clearTimeout(closeTimer);\n";
echo "    closeTimer = null;\n";
echo "  }\n";
echo "}\n";

echo "function mclose() {\n";
echo "  if(currentLayer && noClose!=1)   {\n";
echo "    currentLayer.style.visibility='hidden';\n";
echo "    currentLayerNum = 0;\n";
echo "    currentLayer = null;\n";
echo "    currentitem = null;\n";
echo "  } else {\n";
echo "    noClose = 0;\n";
echo "  }\n";
echo "  currentLayer = null;\n";
echo "  currentitem = null;\n";
echo "}\n";

echo "document.onclick = mclose; \n";
echo "</script>\n";

echo "<style>\n";
echo "#dd {\n";
//link kutusu aşağı yukarı
echo "margin-top:4px;\n";
//link kutusu sola dayanma oranı
echo "  margin-left: 0%;\n";
echo "  padding: 0 0 20px 0;\n";
echo "}\n";

echo "#dd li {\n";
echo "  margin: 0;\n";
echo "  padding: 0 0px 0 0px;\n";
echo "  list-style: none;\n";
echo "  float: left;\n";
echo "  font: bold 11px tahoma;\n";
echo "}\n";

echo "#dd li a.menu {\n";
echo "  display: block;\n";
echo "  text-align: center;\n";
echo "  background: #242424;\n";
//menü kutusu yükseklik genişlik ayarları
echo "  padding: 4px 10px;\n";
echo "  margin: 0 0px 0 0;\n";
echo "  color: #FFF;\n";
//link kutu iç genişliği
echo "  width: 70px;\n";
echo "  text-decoration: none;\n";
echo "}\n";

echo "#dd li a.menu:hover {\n";
//mouse ile menü linki üstüne geldiğinde background rengi
echo "  background: #404040;\n";
echo "}\n";

echo ".submenu {\n";
echo "  background: #242424;\n";
echo "  border: 1px solid #000000;\n";
echo "  visibility: hidden;\n";
echo "  position: absolute;\n";
echo "  z-index: 3;\n";
echo "}\n";

//alt menü
echo ".submenu a {\n";
echo "  display: block;\n";
echo "  font: bold 11px tahoma;\n";
echo "  text-align: left;\n";
echo "  text-decoration: none;\n";
echo "  padding: 5px;\n";
echo "  color: #FFFFFF;\n";
echo "}\n";

echo ".submenu a:hover {\n";
echo "  background: #F7B425;\n";
echo "  color: #FFF;\n";
echo "}\n";
echo "</style>\n"; 

echo "<ul id=\"dd\">\n";

echo "<li><a href=\"$scripturl\" class=\"menu\">ANASAYFA</a></li>\n";

// Is the user allowed to administrate at all? ([admin])
      if ($context['allow_admin'])
      echo ($current_action == 'admin' || $context['browser']['is_ie4']) ? '' : '' , '
      <div class="seperator"><!--no content--></div>
      <li><a href="', $scripturl, '?action=admin" class="menu">ADMİN</a></li>
      ' , $current_action == 'admin' ? '<div class="seperator"><!--no content--></div>' : '<div class="seperator"><!--no content--></div>';

// Go to PM center... [pm]   
   if ($context['user']['is_logged'] && $context['allow_pm'])
   echo ($current_action == 'pm' || $context['browser']['is_ie4']) ? '' : '' , '
      <li><a href="#" class="menu" id="mmenu6" onmouseover="mopen(6);" onmouseout="mclosetime();">ÜYE MENÜSÜ</a>
      <div class="submenu" id="menu6" onmouseover="mcancelclosetime()" onmouseout="mclosetime();">
       <a href="', $scripturl, '?action=pm">ÖZEL MESAJLAR</a>
      <a href="', $scripturl, '?action=profile">PROFİL AYARLARI</a> 
      <a href="', $scripturl, '?action">GEZENBİLİR MAİL</a></div></li>
      ' , $current_action == 'pm';
                  
echo "<div class=\"seperator\"><!--no content--></div>\n";
echo "  <li><a href=\"#\" class=\"menu\" id=\"mmenu1\" onmouseover=\"mopen(1);\" onmouseout=\"mclosetime();\">İÇERİK</a>\n";
echo "       <div class=\"submenu\" id=\"menu1\" onmouseover=\"mcancelclosetime()\" onmouseout=\"mclosetime();\">\n";
echo "        <a href=\"$scripturl?action=pm\">GEZİ NOTLARI</a>\n";
echo "        <a href=\"$scripturl?action=profile\">ETKİNLİKLER</a>\n"; 
echo "        <a href=\"$scripturl?action\">İLAN PANOSU</a>\n";
echo "        <a href=\"$scripturl?action\">TAKVİM</a>\n";
echo "        <a href=\"$scripturl?action=profile\">ETKİNLİKLER</a>\n"; 
echo "    </div>\n";
echo "  </li>\n";

echo "<div class=\"seperator\"><!--no content--></div>\n";
echo "  <li><a href=\"#\" class=\"menu\" id=\"mmenu5\" onmouseover=\"mopen(5);\" onmouseout=\"mclosetime();\">FOTOĞRAF</a>\n";
echo "    <div class=\"submenu\" id=\"menu5\" onmouseover=\"mcancelclosetime()\" onmouseout=\"mclosetime();\">\n";
echo "        <a href=\"$scripturl?action=pm\">GALERİ</a>\n";
echo "        <a href=\"$scripturl?action=profile\">YARIŞMALAR</a>\n"; 
echo "    </div>\n";
echo "  </li>\n";

echo "<div class=\"seperator\"><!--no content--></div>\n";
echo "  <li><a href=\"#\" class=\"menu\" id=\"mmenu2\" onmouseover=\"mopen(2);\" onmouseout=\"mclosetime();\">FAYDALI</a>\n";
echo "    <div class=\"submenu\" id=\"menu2\" onmouseover=\"mcancelclosetime()\" onmouseout=\"mclosetime();\">\n";
echo "        <a href=\"$scripturl?action=pm\">METEOROLOJİ</a>\n";
echo "        <a href=\"$scripturl?action=profile\">LİNKLER</a>\n"; 
echo "</div>\n";
echo "  </li>\n";

echo "<div class=\"seperator\"><!--no content--></div>\n";
echo "  <li><a href=\"$scripturl?board=50.0\" class=\"menu\">SPONSORLAR</a></li>\n";

echo "<div class=\"seperator\"><!--no content--></div>\n";
echo "  <li><a href=\"#\" class=\"menu\" id=\"mmenu4\" onmouseover=\"mopen(4);\" onmouseout=\"mclosetime();\">YARDIM</a>\n";
echo "    <div class=\"submenu\" id=\"menu4\" onmouseover=\"mcancelclosetime()\" onmouseout=\"mclosetime();\">\n"; 
echo "        <a href=\"$scripturl?action=pm\">FORUMDA KARŞILAŞTIĞINIZ SORUNLAR</a>\n";
echo "        <a href=\"$scripturl?action=profile\">FORUM KULLANIM KILAVUZU</a>\n"; 
echo "        <a href=\"$scripturl?action\">FORUM KURALLARI</a>\n";
echo "</div>\n";
echo "  </li>\n";

echo "<div class=\"seperator\"><!--no content--></div>\n";
echo "  <li><a href=\"$scripturl?action=contact\" class=\"menu\">İLETİŞİM</a></li>\n";

// Otherwise, they might want to [logout]...
   echo "<div class=\"seperator\"><!--no content--></div>\n";
   if ($context['user']['is_logged'])
      echo ($current_action == 'logout' || $context['browser']['is_ie4']) ? '' : '' , '
      <li><a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '" class="menu">ÇIKIŞ</a></li>
      <div class="seperator"><!--no content--></div>
      ' , $current_action == 'logout';
      
echo "</ul>\n";

[Sarge]

A pure CSS solution (well, with just a bit of JavaScript for IE 6 and earlier) like Sons of Ursidae would work better.

[yol]

Thank you friend, you right. Its look like better and I will try it.