• Registered: 2005-10-20
  • Posts: 60

Topic: create a new css menu.

Hi, how do I change the regular menu to a new css drop menu? How do I integrate the new menu in to the forum?

The code that generates the menu:

//
// Generate the "navigator" that appears at the top of every page
//
function generate_navlinks()
{
    global $pun_config, $lang_common, $pun_user;

    // Index and Userlist should always be displayed
    $links[] = '<li id="navindex"><a href="index.php">'.$lang_common['Index'].'</a>';
    $links[] = '<li id="navforum"><a href="forum.php">'.$lang_common['Forum'].'</a>';
    $links[] = '<li id="navuserlist"><a href="userlist.php">'.$lang_common['User list'].'</a>';

    if ($pun_config['o_rules'] == '1')
        $links[] = '<li id="navrules"><a href="misc.php?action=rules">'.$lang_common['Rules'].'</a>';

    if ($pun_user['is_guest'])
    {
        if ($pun_user['g_search'] == '1')
            $links[] = '<li id="navsearch"><a href="search.php">'.$lang_common['Search'].'</a>';

        $links[] = '<li id="navregister"><a href="register.php">'.$lang_common['Register'].'</a>';
        $links[] = '<li id="navlogin"><a href="login.php">'.$lang_common['Login'].'</a>';

        $info = $lang_common['Not logged in'];
    }
    else
    {
        if ($pun_user['g_id'] > PUN_MOD)
        {
            if ($pun_user['g_search'] == '1')
                $links[] = '<li id="navsearch"><a href="search.php">'.$lang_common['Search'].'</a>';

            $links[] = '<li id="navprofile"><a href="profile.php?id='.$pun_user['id'].'">'.$lang_common['Profile'].'</a>';
            $links[] = '<li id="navlogout"><a href="login.php?action=out&id='.$pun_user['id'].'">'.$lang_common['Logout'].'</a>';
        }
        else
        {
            $links[] = '<li id="navsearch"><a href="search.php">'.$lang_common['Search'].'</a>';
            $links[] = '<li id="navprofile"><a href="profile.php?id='.$pun_user['id'].'">'.$lang_common['Profile'].'</a>';
            $links[] = '<li id="navadmin"><a href="admin_index.php">'.$lang_common['Admin'].'</a>';
            $links[] = '<li id="navlogout"><a href="login.php?action=out&id='.$pun_user['id'].'">'.$lang_common['Logout'].'</a>';
        }
    }

    // Are there any additional navlinks we should insert into the array before imploding it?
    if ($pun_config['o_additional_navlinks'] != '')
    {
        if (preg_match_all('#([0-9]+)\s*=\s*(.*?)\n#s', $pun_config['o_additional_navlinks']."\n", $extra_links))
        {
            // Insert any additional links into the $links array (at the correct index)
            for ($i = 0; $i < count($extra_links[1]); ++$i)
                array_splice($links, $extra_links[1][$i], 0, array('<li id="navextra'.($i + 1).'">'.$extra_links[2][$i]));
        }
    }

    return '<ul>'."\n\t\t\t\t".implode($lang_common['Link separator'].'</li>'."\n\t\t\t\t", $links).'</li>'."\n\t\t\t".'</ul>';

}

How do I change the standard menu to this new one:

<div class="menu">

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html">DEMOS
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<!--[if lte IE 6]>
<a href="../opacity/index.html">OPACITY
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

<!-- clear the floats if required -->
<div class="clear"> </div>

</div>

I want it to look like this one: http://www.marine-hunters.co.uk/

  • From: Leuven, Belgium
  • Registered: 2005-06-14
  • Posts: 2,653

Re: create a new css menu.

Well, you'd have to edit that function and edit main.tpl a bit.
This is what I'd do:

Make your standard menu, make a menu for your forum, and call generate_navlinks() with this modification:

// Replace
return '<ul>'."\n\t\t\t\t".implode($lang_common['Link separator'].'</li>'."\n\t\t\t\t", $links).'</li>'."\n\t\t\t".'</ul>';
// With
return "\n\t\t\t\t".implode($lang_common['Link separator'].'</li>'."\n\t\t\t\t", $links).'</li>'."\n\t\t\t";

I guess that should work... smile

  • From: Herts - UK
  • Registered: 2005-09-11
  • Posts: 842

Re: create a new css menu.

Oi thats my site... wink

I am afraid that I can chop it up and pass it over.. but it was way over a year ago that I produced that now. So by all means ask any questions if any problems.... but I cant gurantee a right answer or that this will even work. Sorry!

Here you go...

My functions.php

//
// Generate the "navigator" that appears at the top of every page
//
function generate_navlinks()
{
global $pun_config, $lang_common, $pun_user;
$links.=<<<EOD
<ul id="menuList">


<li class="menubar">
<a href="index.php" class="starter" accesskey="n" title="">HOME</a>
<ul id="home" class="menu">
EOD;
if (!$pun_user['is_guest']) {
$links.='<li><a class="starter" accesskey="" title="" href="profile.php?id='.$pun_user['id'].'"> PROFILE</a></li>';
$links.='<li><a class="starter" accesskey="" title="" href="message_list.php"> MESSAGES</a></li>';
}
if ($pun_user['g_id'] == '1') {
$links.='<li><a class="starter" accesskey="" title="" href="admin_index.php"> ADMIN</a></li>';
$links.='<li><a class="starter" accesskey="" title="" href="userlist.php"> USERLIST</a></li>';
}
if ($pun_user['g_id'] == '2' || $pun_user['g_id'] == '1') {
$links.='<li><a class="starter" accesskey="" title="" href="/phpcountersmart/index.php"> WEB STATS</a></li>';
}
if (!$pun_user['is_guest']) {
$links.='<li><a class="starter" accesskey="" title="" href="login.php?action=out&id='.$pun_user['id'].'"> LOG OUT</a></li>';
} else {
$links.='<li><a class="starter" accesskey="" title="" href="login.php"> LOGIN</a></li>';
$links.='<li><a class="starter" accesskey="" title="" href="register.php"> REGISTER</a></li>';
}
$links.=<<<EOD
</ul></li>

<li class="menubar">
<a href="forum.php" class="starter" accesskey="f" title="">FORUM</a>
<ul id="forum" class="menu">
EOD;
if (!$pun_user['is_guest'])    {
$links.='<li><a class="starter" accesskey="" title="" href="search.php"> SEARCH</a></li>';
}
$links.=<<<EOD
<li><a class="starter" accesskey="" title="" href="gallery.php"> GALLERY</a></li>
<li><a class="starter" accesskey="" title="" href="downloads.php"> DOWNLOADS</a></li>
</ul></li>

<li class="menubar">
<a href="mhclan.php" class="starter" accesskey="d" title="">MH CLAN</a>
<ul id="mhclan" class="menu">
EOD;
if ($pun_user['g_id'] == '4') {
$links.='<li><a class="starter" accesskey="" title="" href="recruitment.php"> JOIN MH TEAM</a></li>';
}
$links.='<li><a class="starter" accesskey="" title="" href="soldier.php"> SOLDIERS</a></li>';

if (!$pun_user['is_guest']) {
$links.=<<<EOD
<li><a class="starter" accesskey="" title="" href="calendar.php"> CALENDAR</a></li>
<li><a class="starter" accesskey="" title="" href="leaderboard.php"> LEADERBOARD</a></li>
EOD;
}

$links.=<<<EOD
</ul></li>
</ul>
EOD;
$links.='';


return $links;
}

attach this 'cssmenu.css'

#menuList {
    position:relative;
    font-size:1em;
    z-index:100;
    margin: 0px;
    padding: 0px;
}

#mainMenu {
    position:relative;
    margin-left: 2px;
}

#menuList ul {
    z-index:100;
    margin: 0px;
    padding: 0px;
}

#menuList li {
    z-index:100;
    display:inline;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

a.starter {
    z-index:100;
    margin: 0px;
    padding: 3px;
    font-family: Courier, mono;
    font-size: 14px;
    color: #FFF;
    padding-left:25px;
    padding-right:25px;
    background-color: #415364;
    text-decoration: none;
    border: 1px solid #e0b122;
}

a.starter:hover, a.starter:active, a.starter:focus {
    background-color: #415364;
    color: #e0b122;
}
#bfover, #home, #compare, #mhclan, #forum, #test {
    width: 130px;
}
.menu {
    text-align: left;
    position: absolute;
    visibility: hidden;
    z-index: 100;
}
.menu li {
    width:100%;
}
.menu li a {
    background: #415364;
    z-index:100;
    color: #fff;
    display: block;
    width:100%;
    font-family: Courier, mono;
    font-size: 12px;
    padding:4px;
    margin: 0px;
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
    margin-top:1px;
    border-left: 2px solid #e0b122;
    border-right: 2px solid #e0b122;
    border-bottom: 1px solid #e0b122;
    border-top: 1px solid #e0b122;
}

.menu li a:hover, .menu li a:active, .menu li a:focus {
    background-color: #263E54;
    color: #e0b122;
}
img {
    border: none;
}
.imgwid {
    vertical-align: middle;
}

and finally attach the javascript 'cssmenu.js'

    // Load up the stylesheet for the menus. This code is here rather than in the html
    // document to allow for non-javascript browsers to render a seperately styled non-
    // interactive list rather than the DHTML menu
    document.write("<link rel='stylesheet' href='/style/cssmenu.css' type='text/css' />");

    var currentMenu = null;
    var lastMenuStarter = null;
    var mytimer = null;
    var timerOn = false;
    var opera = window.opera ? true : false;

    if (!document.getElementById)
        document.getElementById = function() { return null; }

    function initialiseDummy(dummy, root) {
        dummy.onmouseover = function() {
            containingMenu = this.parentNode.parentNode;
            for (var x=0;x<containingMenu.childNodes.length;x++) {
                if (containingMenu.childNodes[x].nodeName.toUpperCase()=="LI") {
                    if (containingMenu.childNodes[x].getElementsByTagName("ul").length>0) {
                        containingMenu.childNodes[x].getElementsByTagName("UL").item(0).style.visibility = 'hidden';
                    }
                }
            }
        }
        dummy.onfocus = function() {
            dummy.onmouseover();
        }
    }
    
    function initialiseMenu(menu, starter, root) {
        var leftstarter = false;
    
        if (menu == null || starter == null) return;
            currentMenu = menu;
    
        starter.onmouseover = function() {
            if (currentMenu) {
                if (this.parentNode.parentNode!=currentMenu) {
                    currentMenu.style.visibility = "hidden";
                    hideAllMenus(currentMenu, root);

                }
                if (this.parentNode.parentNode==root) {
                    while (currentMenu.parentNode.parentNode!=root) {
                        currentMenu.parentNode.parentNode.style.visibility = "hidden";
                        currentMenu = currentMenu.parentNode.parentNode;
                    }
                }
                currentMenu = null;
                this.showMenu();
                }
        }
    
        menu.onmouseover = function() {
            if (currentMenu) {
                currentMenu = null;
                this.showMenu();
                }
        }    
    
        starter.showMenu = function() {
            if (!opera) {
                if (this.parentNode.parentNode==root) {
                    menu.style.left = this.offsetLeft + "px";
                    menu.style.top = this.offsetTop + this.offsetHeight + "px";
                    if (menu.offsetWidth < this.offsetWidth) menu.style.width = this.offsetWidth;
                }
                else {
                     menu.style.left = this.offsetLeft + this.offsetWidth + "px";
                     menu.style.top = this.offsetTop + "px";
                }
            }
            else {
                var rootOffset = root.offsetLeft;
                if (this.parentNode.parentNode==root) {
                    menu.style.left = this.offsetLeft - rootOffset + "px";
                    menu.style.width = this.offsetWidth;
                    menu.style.top = this.offsetHeight + "px";
                }
                else {
                     menu.style.left = this.offsetWidth - rootOffset + "px";
                     menu.style.top = this.offsetTop + "px"; //menu.style.top - menu.style.offsetHeight + "px";
                }

            }
            menu.style.visibility = "visible";
            currentMenu = menu;
        }

        starter.onfocus     = function() {
            starter.onmouseover();
        }
    
        menu.onfocus     = function() {
//            currentMenu.style.visibility="hidden";
        }

        menu.showMenu = function() {
            menu.style.visibility = "visible";
            currentMenu = menu;
            stopTime();
        }

        menu.hideMenu = function()  {
            if (!timerOn) {
                mytimer = setInterval("killMenu('" + this.id + "', '" + root.id + "');", 2000);
                timerOn = true;
                for (var x=0;x<menu.childNodes.length;x++) {
                    if (menu.childNodes[x].nodeName=="LI") {
                        if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
                            menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
                            menuItem.style.visibility = "hidden";
                        }
                    }
                }
            }
        }

        menu.onmouseout = function(event) {
            this.hideMenu();
        }
        menu.onblur = function() {
            this.hideMenu();
        }
        starter.onmouseout = function() {
            for (var x=0;x<menu.childNodes.length;x++) {
                if (menu.childNodes[x].nodeName=="LI") {
                    if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
                        menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
                        menuItem.style.visibility = "hidden";
                    }
                }
            }
            menu.style.visibility = "hidden";
        }
}
    function killMenu(menu, root) {
        var menu = document.getElementById(menu);
        var root = document.getElementById(root);
        menu.style.visibility = "hidden";
        for (var x=0;x<menu.childNodes.length;x++) {
            if (menu.childNodes[x].nodeName=="LI") {
                if (menu.childNodes[x].getElementsByTagName("UL").length>0) {
                    menuItem = menu.childNodes[x].getElementsByTagName("UL").item(0);
                    menuItem.style.visibility = "hidden";
                }
            }
        }
        while (menu.parentNode.parentNode!=root) {
            menu.parentNode.parentNode.style.visibility = "hidden";
            menu = menu.parentNode.parentNode;
        }
        stopTime();
    }
    function stopTime() {
        if (mytimer) {
              clearInterval(mytimer);
             mytimer = null;
             timerOn = false;
        }
    } 

    window.onload = function() {
        var root = document.getElementById("menuList");
        var rootOffset = root.offsetLeft;
        getMenus(root, root);
    }

function getMenus(elementItem, root) {
    var selectedItem;
    var menuStarter;
    var menuItem;
    for (var x=0;x<elementItem.childNodes.length;x++) {
        if (elementItem.childNodes[x].nodeName.toUpperCase()=="LI") {
            if (elementItem.childNodes[x].getElementsByTagName("ul").length>0) {
                menuStarter = elementItem.childNodes[x].getElementsByTagName("A").item(0);
                menuItem = elementItem.childNodes[x].getElementsByTagName("UL").item(0);
                getMenus(menuItem, root);
                initialiseMenu(menuItem, menuStarter, root);
            }
            else {
                initialiseDummy(elementItem.childNodes[x].getElementsByTagName("A").item(0), root);
            }
        }
    }
}
function hideAllMenus(elementItem, root) {
    for (var x=0;x<elementItem.childNodes.length;x++) {
        if (elementItem.childNodes[x].nodeName.toUpperCase()=="LI") {
            if (elementItem.childNodes[x].getElementsByTagName("ul").length>0) {
                elementItem.childNodes[x].getElementsByTagName("UL").item(0).style.visibility = 'hidden';
                hideAllMenus(elementItem.childNodes[x].getElementsByTagName("UL").item(0), root);
            }
        }
    }
}
Me: Blog | Twitter | TwitPic Exporter

StevenBullen's Website

  • From: Herts - UK
  • Registered: 2005-09-11
  • Posts: 842

Re: create a new css menu.

It works... but something that works does not mean its great. By all means check out my code, but its not great.... The javascript is just a dhtml menu from google.... then converted... Sorry cant credit producer as cant remember name and deleted his details.
Doh!

Me: Blog | Twitter | TwitPic Exporter

StevenBullen's Website