CSS/JavaScript Dropdown Menu v1.0e

I realize this thread is a few months old but it is still on the front page.

I too am trying to get the middot.
Did you every get it working properly?

I am also trying to get the Date and Time in the DDM.

I have added this code to my Theme instead of adding it as another banner in the Main Settings.

Thanks for a great infusion Smokeman.

No worries, and you're correct. That will remove the boldness. ;)

I think we were posting at the same time. This is exactly what I ve thought. Possibly it is because of bold thing. I will try to modify to make it not bold.

in line 101 it says font-weight:bold
If i configure it, it will be sold possibly.


Thanks heaps Kaster

Regards

If you're looking at the value being displayed from menu_admin.php, then yes, it is going to say Arial if that's what you had chosen last.

This is because we have not modified that page, to say, or show anything otherwise. Here, this is how that portion of the page is coded:
[syntaxhighlighter brush=php,first-line=1,highlight=0,collapse=false,html-script=false] <select name='textfont' class='textbox'>
<option value='arial'".($menusettings2['mset_textfont'] == 'arial' ? " selected" : "".">Arial</option>
<option value='verdana'".($menusettings2['mset_textfont'] == 'verdana' ? " selected" : "".">Verdana</option>
<option value='Helvetica'".($menusettings2['mset_textfont'] == 'Helvetica' ? " selected" : "".">Helvetica</option>
<option value='sans-serif'".($menusettings2['mset_textfont'] == 'sans-serif' ? " selected" : "".">Sans-Serif</option>
</select>[/syntaxhighlighter]Try changing the value. It shouldn't matter what you select, now that we've modified the css. The displayed font should be your theme's font.

What may be different, at least on my page, is the main menu text is bold. The sub-menu items are not.

Have you noticed that the main menu fonts are still arial. subheaders and sub levels are changed?

++

Maybe the fonts are bold in Main Menu so it is perceived as Arial.

Am I going to far asking how can I edit the bold or normal font .

JoiNNN was right about the database. The value is controlled through the admin panel, but you are limited to which fonts you may actually choose. They're predefined within the drop down selection, and stored into a table in the db.

In your situation, I would simply remove the font portion of the css, to not specify any particular font. This would allow your current themes font to naturally set it'self as the font for your menu.

Alter the #nav attribute, which is cleverly stored within menu.php. Here is the altered version:
[syntaxhighlighter brush=css,first-line=1,highlight=0,collapse=false,html-script=false]<?php
/*-------------------------------------------------------+
| PHPFusion Content Management System
| Copyright © 2002 - 2012 Nick Jones
| http://www.php-fusion.co.uk/
+--------------------------------------------------------+
| Name: menu.php
| Author : Smokeman
| Email: smokeman@esenet.dk
| Web: http://www.phpfusion-tips.dk/
+--------------------------------------------------------+
| This program is released as free software under the
| Affero GPL license. You can redistribute it and/or
| modify it under the terms of this license which you
| can read by viewing the included agpl.txt or online
| at www.gnu.org/licenses/agpl.html. Removal of this
| copyright header is strictly prohibited without
| written permission from the original author(s).
+--------------------------------------------------------*/
include INFUSIONS."deluxe_dropdown_menu/infusion_db.php";

add_to_head("<script src='".INFUSIONS."deluxe_dropdown_menu/includes/js/stuHover.js' type='text/javascript'></script>";

echo "
<div class='preload1'></div>
<div class='preload2'></div>
<div class='preload3'></div>
<div class='preload4'></div>
";

// Read the menus
$m = array();
$msql = dbquery("SELECT * FROM ".DB_MENUS." ORDER BY menu_order";
while ($mdata = dbarray($msql))
{
$m[] = $mdata;
}

// Parse links and names
foreach ($m as &$mdata)
{
if (!preg_match("!^(ht|f)tp(s)?://!i", $mdata['menu_link']))
{
$mdata['menu_link'] = BASEDIR.$mdata['menu_link'];
}
$mdata['menu_name'] = parseubb($mdata['menu_name'], "b|i|u|img|color";
}

// Make the menu
menuitem($m);

// ============================== Get Data From Menu Settings ============================== //
$menusettings = dbarray(dbquery("SELECT * FROM ".DB_MENU_SETTINGS));

// ============================== Adjusting The Width ============================== //
$width1 = $menusettings['mset_width'] - 10;
$width2 = $menusettings['mset_width'] - 2;

if ($menusettings['mset_set_style'] == "0" {
// ============================== Load Pre-Installed Templates CSS ============================== //
add_to_head("<link rel='stylesheet' type='text/css' href='".INFUSIONS."deluxe_dropdown_menu/templates/".$menusettings['mset_templates']."/".$menusettings['mset_templates'].".css' />";
} else {
// ============================== Load User Defined Template CSS ============================== //
add_to_head("<style type='text/css'>
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/ (...)
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.

Very highly modified by Smokeman
so it fits for the DeLuxe Dropdown Menu v1.1
=================================================================== */

/* ---------- Preload Hover Images ---------- */
.preload1 {background: url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_main_img'].";}
.preload2 {background: url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_main_arrow_himg'].";}

/* ---------- Hide The Next level ---------- */
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

/* ---------- All Link Colors ---------- */
#nav li a
{color: black;}

/* ---------- Position Of The Dropdown's ---------- */
#nav li:hover {position:relative; z-index:200;}

/* ---------- Main Menu ---------- */
#nav {padding:0; margin:0; list-style:none; height:35px; background: url('".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_main_img']."' repeat-x; background-color: #".$menusettings['mset_main_bgcolor']."; position:relative; z-index:500;}
#nav li.top {display:block; float:left; height:35px;}
#nav li a.top_link {float:left; display:block; height:35px; line-height:33px; color:#CCC; text-decoration: none; font-size:".$menusettings['mset_textsize']."px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#nav li div {float:left; display:block; margin-left:12px; padding-right:24px; height:35px; background: url('".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_main_img']."' right top no-repeat;}
#nav li div.down {float:left; display:block; margin-left:12px; padding-right:24px; height:35px; background: url('".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_main_arrow_img']."' right top no-repeat; background-color: #".$menusettings['mset_main_bgcolor_arrow'].";}
#nav li.top:hover{color:#".$menusettings['mset_htextcolor_main']."; background: url('".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_main_himg']."' no-repeat;}
#nav li:hover a.top_link {color:#".$menusettings['mset_htextcolor_main'].";}
#nav li:hover div {background: url('".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_main_himg']."' right top no-repeat; background-color: #".$menusettings['mset_main_hbgcolor'].";}
#nav li:hover div.down {background: url('".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_main_arrow_himg']."' right top no-repeat; background-color: #".$menusettings['mset_main_hbgcolor_arrow'].";}

/* ---------- Sub Menu 1 ---------- */
#nav li ul li a:hover
{color: #".$menusettings['mset_htextcolor_sub1'].";}
#nav li:hover ul
{left:".$menusettings['mset_width']."px; top:-4px; background: #".$menusettings['mset_sub1_bgcolor']."; padding:3px; border:1px solid #".$menusettings['mset_bordercol_sub1']."; white-space:nowrap; width:".$menusettings['mset_width']."px; z-index:400; height:auto;}
#nav li:hover ul.sub
{left: 1px; top:35px; background: #".$menusettings['mset_sub1_bgcolor']."; padding:3px; border:1px solid #".$menusettings['mset_bordercol_sub1']."; white-space:nowrap; width:".$menusettings['mset_width']."px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:".$menusettings['mset_width']."px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:".$menusettings['mset_textsize']."px; height:18px; width:".$width2."px; line-height:18px; text-indent:5px; text-decoration:none;border:1px solid #".$menusettings['mset_sub1_bgcolor'].";}
#nav li:hover ul.sub li a:hover
{background:#".$menusettings['mset_sub1_hbgcolor']."; border-color:#".$menusettings['mset_hbordercol_sub1'].";}
#nav li:hover ul.sub li a.fly:hover
{background:#".$menusettings['mset_sub1_hbgcolor']." url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_himg']." ".$width1."px 6px no-repeat;}
#nav li:hover a.fly
{background:#".$menusettings['mset_sub1_hbgcolor']." url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_himg']." ".$width1."px 6px no-repeat; border-color:#".$menusettings['mset_hbordercol_sub1'].";}
#nav li:hover li a
{border-color:#".$menusettings['mset_sub1_bgcolor'].";}
#nav li:hover li a:hover
{border-color:#".$menusettings['mset_hbordercol_sub1']."; background:#".$menusettings['mset_sub1_hbgcolor'].";}
#nav li:hover li a.fly
{background:#".$menusettings['mset_sub1_bgcolor']." url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_img']." ".$width1."px 6px no-repeat; border-color:#".$menusettings['mset_sub1_bgcolor'].";}
#nav li:hover li a.fly:hover
{background:#".$menusettings['mset_sub1_hbgcolor'].";}

/* ---------- Sub Menu 2 ---------- */
#nav li ul li ul li a:hover
{color: #".$menusettings['mset_htextcolor_sub2'].";}
#nav li:hover li:hover ul
{left:".$menusettings['mset_width']."px; top:-4px; background: #".$menusettings['mset_sub2_bgcolor']."; padding:3px; border:1px solid #".$menusettings['mset_bordercol_sub2']."; white-space:nowrap; width:".$menusettings['mset_width']."px; z-index:400; height:auto;}
#nav li:hover li:hover ul.sub
{left: 1px; top:35px; background: #".$menusettings['mset_sub2_bgcolor']."; padding:3px; border:1px solid #".$menusettings['mset_bordercol_sub2']."; white-space:nowrap; width:".$menusettings['mset_width']."px; height:auto; z-index:300;}
#nav li:hover li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:".$menusettings['mset_width']."px; font-weight:normal;}
#nav li:hover li:hover ul.sub li a
{display:block; font-size:".$menusettings['mset_textsize']."px; height:18px; width:".$width2."px; line-height:18px; text-indent:5px; text-decoration:none;border:1px solid #".$menusettings['mset_sub2_bgcolor'].";}
#nav li:hover li:hover ul.sub li a:hover
{background:#".$menusettings['mset_sub2_hbgcolor']."; border-color:#".$menusettings['mset_hbordercol_sub2'].";}
#nav li:hover li:hover ul.sub li a.fly:hover
{background:#".$menusettings['mset_sub2_hbgcolor']." url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_himg']." ".$width1."px 6px no-repeat;}
#nav li:hover li:hover a.fly
{background:#".$menusettings['mset_sub1_hbgcolor']." url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_himg']." ".$width1."px 6px no-repeat; border-color:#".$menusettings['mset_hbordercol_sub1'].";}
#nav li:hover li:hover li a
{border-color:#".$menusettings['mset_sub2_bgcolor'].";}
#nav li:hover li:hover li a:hover
{border-color:#".$menusettings['mset_hbordercol_sub2']."; background:#".$menusettings['mset_sub2_hbgcolor'].";}
#nav li:hover li:hover li a.fly
{background:#".$menusettings['mset_sub2_bgcolor']." url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_img']." ".$width1."px 6px no-repeat; border-color:#".$menusettings['mset_sub2_bgcolor'].";}
#nav li:hover li:hover li a.fly:hover
{background:#".$menusettings['mset_sub2_hbgcolor'].";}

/* ---------- Sub Menu 3 ---------- */
#nav li ul li ul li ul li a:hover
{color: #".$menusettings['mset_htextcolor_sub3'].";}
#nav li:hover li:hover li:hover ul
{left:".$menusettings['mset_width']."px; top:-4px; background: #".$menusettings['mset_sub3_bgcolor']."; padding:3px; border:1px solid #".$menusettings['mset_bordercol_sub3']."; white-space:nowrap; width:".$menusettings['mset_width']."px; z-index:400; height:auto;}
#nav li:hover li:hover li:hover ul.sub
{left: 1px; top:35px; background: #".$menusettings['mset_sub3_bgcolor']."; padding:3px; border:1px solid #".$menusettings['mset_bordercol_sub3']."; white-space:nowrap; width:".$menusettings['mset_width']."px; height:auto; z-index:300;}
#nav li:hover li:hover li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:".$menusettings['mset_width']."px; font-weight:normal;}
#nav li:hover li:hover li:hover ul.sub li a
{display:block; font-size:".$menusettings['mset_textsize']."px; height:18px; width:".$width2."px; line-height:18px; text-indent:5px; text-decoration:none;border:1px solid #".$menusettings['mset_sub3_bgcolor'].";}
#nav li:hover li:hover li:hover ul.sub li a:hover
{background:#fff; border-color:#".$menusettings['mset_hbordercol_sub3'].";}
#nav li:hover li:hover li:hover ul.sub li a.fly:hover
{background:#fff url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_himg']." ".$width1."px 6px no-repeat;}
#nav li:hover li:hover li:hover a.fly
{background:#".$menusettings['mset_sub2_hbgcolor']." url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_himg']." ".$width1."px 6px no-repeat; border-color:#".$menusettings['mset_hbordercol_sub2'].";}
#nav li:hover li:hover li:hover li a
{border-color:#".$menusettings['mset_sub3_bgcolor'].";}
#nav li:hover li:hover li:hover li a:hover
{border-color:#".$menusettings['mset_hbordercol_sub3']."; background:#".$menusettings['mset_sub3_hbgcolor'].";}
#nav li:hover li:hover li:hover li a.fly
{background:#".$menusettings['mset_sub3_bgcolor']." url(".INFUSIONS."deluxe_dropdown_menu/images/".$menusettings['mset_sub_arrow_img']." ".$width1."px 6px no-repeat; border-color:#".$menusettings['mset_sub3_bgcolor'].";}
#nav li:hover li:hover li:hover li a.fly:hover
{background:#".$menusettings['mset_sub3_hbgcolor'].";}

</style>";
}
function menucount(&$m, $id)
{
$n = 0;
foreach($m as $mdata)
if ($mdata['menu_cat'] == $id) $n++;

return $n;
}
function menuitem(&$m, $id = 0, $level = 0)
{
if (menucount($m, $id) > 0)
{
// Set ul class/id
$ul_class = '';
if ($level == 0) $ul_class = " id='nav'";
if ($level == 1) $ul_class = " class='sub'";
echo "<ul".$ul_class.">";

foreach($m as $mdata)
{
if ($mdata['menu_cat'] == $id && checkgroup($mdata['menu_access']))
{
$link_target = ($mdata['menu_window'] == "1" ? " target='_blank'" : "";

if ($level == 0 && menucount($m, $mdata['menu_id']) > 0)
{
$div_start = "<div class='down'>";
$div_end = "</div>";
}
else if ($level == 0)
{
$div_start = "<div>";
$div_end = "</div>";
}
else
{
$div_start = "";
$div_end = "";
}

if ($level == 0)
{
$link_class = " class='top_link'";
}
else if (menucount($m, $mdata['menu_id']) > 0)
{
$link_class = " class='fly'";
}
else
{
$link_class = "";
}

if ($level == 0)
{
$li_class = " class='top'";
}
else
{
$li_class = "";
}

if ($mdata['menu_name'] !== "---" && $mdata['menu_link'] == "---" {
echo "<li".$li_class.">".$div_start."<b>".$mdata['menu_name']."</b>".$div_end."\n";
} else if ($mdata['menu_name'] == "---" && $mdata['menu_link'] == "---" {
echo "<li".$li_class.">".$div_start."<hr />".$div_end."\n";
} else {
echo "<li".$li_class.">".$div_start."<a href='".$mdata['menu_link']."'".$link_target."".$link_class.">".$mdata['menu_name']."</a>".$div_end."\n";
}
menuitem($m, $mdata['menu_id'], $level + 1);
echo "</li>\n";
}
}
echo "</ul>\n";
}
}
?>[/syntaxhighlighter]The changes take place on line 99. If you'd like to see my test site as an example follow the link bellow.
[ulist=circle]Ref: http://dev.fusion.kaster.us[/ulist][ulist=circle]This site's theme, and or content/validity may change at any time.[/ulist]

Great.

Ddraig Updated - Done
Dropdown Deluxe adapted - Done

Synchronizin the fonts - Couldnt done :)

When you setup the site please inform us.

Thanks
Regards

I'll take a look at this. I'm going to setup a test site, and follow JoiNNN's instructions above. I'll edit my post shortly, and see what we can do about this. :G

Clearing the cache didnt work.

Possibly I am modifying the wrong place. Because I was modifying the default template css. but user defined template is fetching the info from somewhere else that I havent discovered yet.

CTRL+F5 on your browser window will force your cache to be refreshed. I do this, rather than F5. Simple, and worth a shot with the advice mentioned above from Marcus. Although JoiNNN is probably right though.

Sometimes clearing the browser cache does the trick, especially when you modify the style of your site.

I'm pretty sure that is a setting in Deluxe menu back end that is stored in DB and can only be changed by modifying some php files.

I know my questions are piece of cake for you but on the other hand writing to the discussions forum can lead others to find solutions.

That's why I find it useful to ask, discuss even simple things.

Gentleman I have another issue now. Being a symmetry freak Id like to have dropdown menu and ddraig theme menu fonts be same.

I have checked css files. And I found this

Theme css



Menu css



And I replaced this line of menu.css with the above line of theme.css

What has happened? Nothing.

Any ideas or advice?

Regards

@JoiNNN

Yeap. You were right. When I first tried to do things you have mentioned I have also add the menu code to the banners. :) (How stupid I am)

This time I did only the things you have mentioned. Positioning is perfect.

You never know how big help you did. Thanks eternally.

Now I will try to arrange the coloring and the site width with the panel.

Thanks and thanks and thanks.

Regards

1) Theme width can changed easily from TCP
2) You did something wrong
3) Make sure you Defuse any other TCP before infusion the latest version
You do things correctly and everything will work ;).

First of all thank you for your quick and clear reply.

However after I updated the new version of the theme and made the change in theme.php

1) The web site width changed in the way that I do not want
2) The menu was still floating on the top of the page instead of the black header background.
3) There was a continuous error message that ddraig theme control has not infused eventhough it was ifused.

Normally I dont give up easily but I do not want to loose the design that I had in the beginning with your beautiful designed theme. My code knowledge is close to 0 level.

So I think I will give up on dropdown menu, I definetly want to keep the theme. I will look for anohter way to have a drop down menu.

Now I uploaded the previous version of ddraig theme back to the site.

Thanks heaps again.

Regards

1st make sure you have the latest version of Ddraig, get it from here https://github.com/JoiNNN/Ddraig-theme (click the ZIP button) then open theme.php search for

and replace with

Also make sure you download latest version of Deluxe menu from http://www.php-fusion.co.uk/forum/viewthread.php?thread_id=30054

Sorry for doing it. I was confused which thread was better the theme one or the infusion one. It will not happen again.
Thanks

- please in the future don't double post threads,I have removed the duplicate thread.
Thank you for understanding,

Hi Guys,

I am seeking some help as you can see in the title.

I loved Ddraig theme and dropdown deluxe is the thing what I was looking for. As developer of the menu mentioned it is coded for standard coded themes.

However Ddraig is not one of those. I tried lots of ways but lack of coding knowledge I couldn't manage to make it work.

What I want is to have dropdown deluxe menu in the exact place of header menu of Ddraig theme.

Is there anyone can help me with this issue.

Thanks in advance for your replies.