Top menu in the header :: Archived

Eestlane · Posted: Tue Jan 16, 2007 6:09 pm Post subject: Top menu in the header

EDIT: Real code is in Downloads now, first post is OUT OF DATE in every aspect Smile

Hi,
I messed several hours to make a top menu triggering data from Dragonfly CPG Main Menu.

I didn't want to make a menu like in this site here, but depending on categories which links to show in overall, as too much links cause headaches.

Add this to themes/default/theme.php after the similar line like
$hr = 1; # 1 to have horizonal rule in comments instead of table bgcolor

Code::

function menyy() {
  global $prefix, $module_id, $db, $cpgtpl;

//Kui pole adminni all siis otsib yles mis moodulis oled ja mis kategooriasse see kuulub
if (!defined('ADMIN_PAGES') && $module_id > 0) {
//Leia mis kategooriasse see moodul kus sa oled kuulub
$p2ring = $db->sql_query("SELECT cat_id FROM ".$prefix."_modules WHERE mid=".$module_id."");
$tyyp = $db->sql_fetchrow($p2ring);
$mod_kateg = $tyyp['cat_id'];
}

//N2itan k6iki kategooriaid
$p2ringkat = $db->sql_query("SELECT cid, name, link, link_type FROM ".$prefix."_modules_cat ORDER BY pos");

while($tyypkat = $db->sql_fetchrow($p2ringkat)) {
 $kategooria_id = $tyypkat['cid'];
 $kategooria_nimi = $tyypkat['name'];
 //Alumine link v6iks soovitatavalt olla kategooria esimene moodul
 $kategooria_link = $tyypkat['link'];
 $kategooria_tyyp = $tyypkat['link_type'];

$cpgtpl->assign_block_vars('kategooria', array(
  'S_KATEGOORIA_NIMI'  => defined($kategooria_nimi) ? constant($kategooria_nimi) : $kategooria_nimi,
  'S_KATEGOORIA_LINK'   => $kategooria_tyyp==0 ? getlink($kategooria_link) : $kategooria_link,
  'IS_CURRENT_CATEGORY'   => !defined('ADMIN_PAGES' && $module_id > 0) ? $kategooria_id == $mod_kateg : false,
 ));

}

//Kui ei ole adminni all...
if (!defined('ADMIN_PAGES') && $module_id > 0) {
//Leian moodulid mis kuuluvad veel siia kategooriasse
$p2ringmodkatis = $db->sql_query("SELECT mid, title FROM ".$prefix."_modules WHERE cat_id=".$mod_kateg." ORDER BY pos");

while($tyypmodkatis = $db->sql_fetchrow($p2ringmodkatis)) {
 $modkatis_id = $tyypmodkatis['mid'];
 $modkatis_nimi = $tyypmodkatis['title'];

 $cpgtpl->assign_block_vars('moodul', array(
  'S_MOODULI_NIMI'  => defined('_'.$modkatis_nimi.'LANG') ? constant('_'.$modkatis_nimi.'LANG') : ereg_replace('_', ' ', $modkatis_nimi),
  'S_MOODULI_LINK'   => getlink($modkatis_nimi),
  'IS_CURRENT_MODULE'   => $modkatis_id == $module_id,
 ));
}
}

// Vabastan k6ik tulemused m2lust, tgelt tehakse seda automaatselt PHP faili l6pus aga pohhui see
$db->sql_freeresult($p2ring);
$db->sql_freeresult($p2ringkat);
$db->sql_freeresult($p2ringmodkatis);

}

Now search for function themeheader() {
and after line starting with global, add

menyy();

Now open themes/default/template/header.html and add

wherever you want the new menu to show up.
As you can see, it wants the menu.html file, so create it in directory themes/default/template/

In just created menu.html add the following code

Code::

<!-- IF PUBLIC_HEADER -->
<div id="menu">
  <ul>
    <!-- BEGIN kategooria -->
     <li><a href="{kategooria.S_KATEGOORIA_LINK}" title="{kategooria.S_KATEGOORIA_NIMI}"<!-- IF kategooria.IS_CURRENT_CATEGORY --> class="active"<!-- ENDIF -->>{kategooria.S_KATEGOORIA_NIMI}</a></li>
    <!-- END kategooria -->
  </ul>
</div>

<div id="submenu">
  <ul>
    <!-- BEGIN moodul -->
     <li><a href="{moodul.S_MOODULI_LINK}" title="{moodul.S_MOODULI_NIMI}"<!-- IF moodul.IS_CURRENT_MODULE --> class="active"<!-- ENDIF -->>{moodul.S_MOODULI_NIMI}</a></li>
    <!-- END moodul -->

  </ul>
</div>
<br style="clear: both;" />
<!-- ELSE -->
    <!-- ENDIF -->

OK, main part is over.

Now open themes/default/style/style.css and add the following to new line after any of the } mark you want

Code::

/* Alusta minu menyyd */

#menu ul {
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
   border-bottom: 5px solid #016DB1;
   background: #727172;
}

html>body #menu ul {
   float: left;
}

#menu li {
   font-size: 11px;
   float: left;
   margin: 0;
   padding: 0 2px 0 0;
   list-style: none;
   background: url(../images/menu_sep.gif) repeat-y top right;
}

#menu a {
   font-weight: bold;
   float: left;
   padding: 4px 15px 4px 15px;
   text-decoration: none;
   color: #fff;
}

#menu a:hover, #menu a.active {
   color: #fff;
   background: #026CB1 url(../images/menu_active_bg.gif) repeat-x bottom left;
}

#menu a.active {
   background: #026CB1 url(../images/menu_active_bg.gif) repeat-x bottom left;
}

/* Sub Menu */

#submenu ul {
   float: left;
   width: 100%;
   margin: 0;
   padding: 5px 0 5px 0;
   list-style: none;
   border-bottom: 1px solid #000;
   background: #ABC9E5 url(../images/submenu_bg.gif) repeat-x top left;
}

#submenu li {
   font-size: 11px;
   float: left;
   margin: 0;
   padding: 0 0px 0 0;
   list-style: none;
}

#submenu .sep {
      border-right: 1px solid #000;
}

#submenu a {
   float: left;
   padding: 0px 15px 0px 15px;
   text-decoration: none;
   color: #000;
}

#submenu a:hover {
   text-decoration: underline;
}

#submenu a.active {
   font-weight: bold;
}

#submenu a.active:hover {
   text-decoration: none;
}

/* L6peta minu menyy */

You need three images also, which should be copied to themes/default/images/ folder, I add them as attachment.

The html code is based on www.mybboard.com/ so it would be prettier if you make your own design for that.

ALL DONE!
There is a requirement that you make all categories in CPG Main Menu administration linkable to some of the modules which are in the category.

No custom links support for submenu yet added!
No administration menu yet added as it's work in development.

You can view a demo at my WWW site.

BTW, does any of you know a way to avoid doing 3 database queries having the same result?

Bluefin221

Your bar is on one side while the body content on another. I use firefox and thats what I see.

Eestlane

Thankyou Bluefin.

Just add

Quote::

in the end of menu.html, I changed first post also.

DJ Maze

Eestlane wrote:

BTW, does any of you know a way to avoid doing 3 database queries having the same result?

Maybe a UNION or JOIN will work

Eestlane

Mhmh, I was thinking about join, but really have no idea how to get any use of it in this code.
Mhmm, or still... an idea is coming.

Haven't heard about union yet.

Where's the cow Sad

NanoCaiordo

one query (SELECT ..... LEFT JOIN.....) UNION (SELECT .... LEFT JOIN....) see includes/classes/cpg_adminmenu.php for the query.

Hogne

So will this make the menu load items from the Main Menu module?

Is there any way you can make it a drop-down like the menu you have on top of this site?

Eestlane

Currently not, as it doesn't trigger all the links, though I will change it... for dropdown box like here, I think you would better wait for developers in here to release the code, as they have certainly better code than mine Smile

Or you can tweak it yourself Smile

Eestlane

Sorry for double post, but need some attention...
I need other kind help now.

Lets take this code

PHP:


$url = get_uri();

//Finds current category and link id
$sql = $db->sql_query("SELECT cat_id, lid FROM ".$prefix."_modules_links WHERE link=".$url."");

It searches the link from CPG Main Menu you are currently at.
BUT

the links are formatted in SQL as that:

Code::

Forums&file=search

And URL's in session like that(assuming LEO is on):

Code::

/Forums/search.html

Doing conversely the session url is almost impossible as there could also be

Code::

/Forums/id=search.html

for example.

The only way could be converting the links, but how to make such database query like...umm, I assume there is function to change the link

PHP:


$sql = $db->sql_query("SELECT cat_id, lid FROM ".$prefix."_modules_links WHERE getlink('link')=".$url."");

I can't do that right? So maybe some ideas...

Eestlane · Last edited by Eestlane on Tue Feb 06, 2007 4:27 pm; edited 1 time in total

OK, now... I choosed easier way, I took cpg_main_menu and modified it.
I added link active fix if LEO is enabled and also category active function, which draws background to current category, and sql queries stayed same as it was in cpg_main_menu (2 queries, 1 for modules, 2 for customlinks).

I give alphaversion files as attachments.
Still... it's buggy buggy buggy, luckily only the visual part.

Doesn't work well in IE yet, not even in IE 7(submenu not horizontal).
Doesn't work well in any browser yet Smile

Actually I need help.
I can give exact position of submenu, by giving pixels from left and from top, so it will start below categorymenu(topmenu), but that is not good, if my menu would be in different places on some page.

I could also give it a location relative to hovered topmenu item, but that would suit only with vertical submenu, like on this site here.

Also, is there any change for submenu to go visible, when hovering the topmenu item and moving mouse cursor somewhere else(atm it will go to hidden again). There is possibility to use javascript to do that, but I would preferre CSS.

I wrote a bit messy text, but hope you get it.

This isn't working menu yet, just a source, if you are interested in some parts. Got some hovering code from this site's menu.

You can view a demo here

Eestlane

:D, got it working with IE also, seems to work quite good now, though some work needs to be done to position it correctly. Anyway here us updated stylefile

xfsunoles

Yellow background of that bar hurt my eye. Sad

Eestlane · Last edited by Eestlane on Wed Feb 14, 2007 2:25 pm; edited 1 time in total

No no no, I'm just testing over there, actually there is no yellow background ment, sry. I just have the problem that submenu will go too wide if 100% is given... and testing stuff

EDIT: Baah, why inveting a bycycle, I found very well made similar menu here, I will base my css file on that now, as it's not so buggy.

Eestlane

Finally ready Smile

You need to modify your theme header to include the block where you want to, here's demo.
You also need to include the css into your theme's header.html

DJ Maze

Looks nice Eestlane not worthy