xoops forums

ladon

Quite a regular
Posted on: 2006/3/27 21:01
ladon
ladon (Show more)
Quite a regular
Posts: 284
Since: 2003/10/31
#1

[How to] Create a nice (static) dropdown menu.

I’ve written this little guide three times now for ppl asking me for it trough PM. So this time I figured I’d post it in the forum. For someone having average knowledge of html/css this isn’t very hard. But I hope it’ll prove usefull for those who want to fiddle around with their theme, but don’t have the required knowledge the incorporate something like this dopdown menu.

To create a dropdown menu like I have on my website (www.zodt.nl) you’ll have to do four simple things.

Put the following code in a file called menu.js and place it in you theme folder. Firefox doesn’t need this .js (as it is a proper browser) but it’s needed for IE in order for the dropdown effect to work:
sfHover = function() {
    var 
sfEls document.getElementById("nav").getElementsByTagName("LI");
    for (var 
i=0i<sfEls.lengthi++) {
        
sfEls[i].onmouseover=function() {
            
this.className+=" sfhover";
        }
        
sfEls[i].onmouseout=function() {
            
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
        }
    }
}
if (
window.attachEventwindow.attachEvent("onload"sfHover);


In the header of your theme.html, place this:
<script type="text/javascript" src="<{$xoops_url}>/themes/your_theme_dir/menu.js"></script>


Next, place de following code in your theme.html where you want the menu to display:
<{include file="your_theme_dir/theme_menu.html"}>


These last two steps will include code you’ll have to edit in order to blend it into your theme. As shown here is pretty much how I use it.

Now let’s add the important .CSS stuff. Add this to your_theme_dir/style.css: note: this css might not validate, never did a check, works for me
/* menu */

#nav, #nav ul {
  
margin0;
  
padding0 0px 0 0px;
  list-
stylenone;
  
font-family'Lucida Grande'VerdanaArialSans-Serif
  
font-size8px;
  
font-weightbold;
  
color#ffffff;
  
line-height20px;
  
text-indent:0px;
  
text-align:center;
}

#nav a {
    
displayblock;
    
width11em;
    
colorwhite;
}

#nav a:hover, nav a:visited {
    
displayblock;
    
width11em;
    
color#333;
}

#nav li {
    
floatleft;
    
width11em
    list-
style:none;
}

#nav li ul {
    
list-style:none;
    
positionabsolute;
    
background#4281B7;
    
width11em;
    
left: -999em;
    
margin0 0 0 -5.45em;
}

#nav li:hover ul, #nav li.sfhover ul {
    
leftauto;
}

#content {
    
clearright;
}

div.message {
    
text-align:center;
    
color:#0000FF;
    
font-size:15px;
    
border:thin;
    
border-style:dotted;
    
background-color#F3F1B2;
    
width:auto;
}
/* end menu*/


As seen in the second step we included a theme_menu.html. This is where the actual menu resides. So let’s create you_theme_dir/theme_menu.html:
<ul id="nav">
        <{if 
$xoops_isuser}>
        
        <
li>
          <
a href="<{$xoops_url}>/user.php">Hoi <{$xoops_uname}>!</a>
              <
ul>
                <
li><a href="<{$xoops_url}>/user.php">Mijn gegevens</a></li>
                <
li>
                  <{if 
$msgcount 0}>
                    <
class="highlight" href="<{$xoops_url}>/viewpmsg.php">PM inbox (<span style="color:red; font-size:10px; font-weight: bold;"><{$msgcount}></span>)</a>
                  <{else}>
                    <
a href="<{$xoops_url}>/viewpmsg.php">PM inbox</a>
                  <{/if}>
                </
li>
                <{if 
$xoops_isadmin}>
                  <
li><a href="<{$xoops_url}>/modules/webmailfx/">Webmail</a></li>
                <{/if}>
                <
li><a href="<{$xoops_url}>/notifications.php">Notificaties</a></li>
                <
li><a href="<{$xoops_url}>/user.php?op=logout">Uitloggen</a></li>
            </
ul>
        </
li>
            <
li>
              <
a href="<{$xoops_url}>">Zodt</a>
                  <
ul>
                    <
li><a href="<{$xoops_url}>">Home</a></li>
                    <
li><a href="<{$xoops_url}>/modules/about/index.php?id=1">About</a></li>
                    <
li><a href="<{$xoops_url}>/modules/sitemap/">Sitemap</a></li>
                    <
li><a href="<{$xoops_url}>/search.php">Zoeken</a></li>
                </
ul>
            </
li>
            
            <
li>
              <
a href="<{$xoops_url}>/modules/log/">Log</a>
                  <
ul>
                    <
li><a href="<{$xoops_url}>/modules/log/">Laatste logs</a></li>
                    <
li><a href="<{$xoops_url}>/modules/log/archive.php">Archief</a></li>
                    <
li><a href="<{$xoops_url}>/modules/log/submit.php">Submit</a></li>
                </
ul>
            </
li>

            <
li>
              <
a href="<{$xoops_url}>/modules/newbb/">Forum</a>
                  <
ul>
                    <{if 
$kubrick_selector == TRUE}>
                      <
li><a href="<{$xoops_url}>/newbb+search.htm">Zoeken in forum</a></li>
                       <!--<{if 
$mark_read}>
                        <
li><a href="<{$mark_read}>">Markeer gelezen</a></li>
                        <
li><a href="<{$mark_UNread}>">Markeer ongelezen</a></li>
                      <{/if}> -->
                      <
li><a href="http://www.zodt.nl/newbb+viewall.htm">Active topics</a></li>
                      <
li><a href="http://www.zodt.nl/newbb+viewall.type+unread.htm">Ongelezen topics</a></li>
                      <{if 
$viewer_is_admin == true}>
                        <
font color="#00FF00">MOD OPTIES</font><br />
                          <{foreach 
item=act from=$admin_actions}> <{$act}> <{/foreach}>
                        <{foreach 
item=actpoll from=$adminpoll_actions}> <{$actpoll}> <{/foreach}> 
                        <{/if}>
                    <{/if}> 
                  </
ul>
            </
li>

           <{if 
$xoops_isadmin}>
            <
li>
              <
a href="<{$xoops_url}>/admin.php">Admin</a>
                  <
ul>
                    <
li><a href="<{$xoops_url}>/admin.php">Admin Alg</a></li>
                    <
li><a href="<{$xoops_url}>/modules/log/admin/index.php?op=newarticle">Log posten</a></li>
                    <
li><a href="<{$xoops_url}>/modules/polls/admin/index.php">Poll admin</a></li>
                    <
li><a href="<{$xoops_url}>/modules/xoopsmembers/index.php">Memberstats</a></li>
                    <
li><a target="_blank" href="http://zodt.nl/phpmyvisites/">Full stats</a></li>
                </
ul>
            </
li>
               <{/if}>
            
          <{else}>
       
            <
li>
              <
a href="<{$xoops_url}>/user.php">Inloggen</a></a>
            </
li>
            <
li>
              <
a href="<{$xoops_url}>/register.php">Registreren</a>
            </
li>
            <
li>
              <
a href="<{$xoops_url}>">Zodt</a>
                  <
ul>
                    <
li><a href="<{$xoops_url}>">Home</a></li>
                    <
li><a href="<{$xoops_url}>/modules/about/index.php?id=1">About</a></li>
                    <
li><a href="<{$xoops_url}>/modules/sitemap/">Sitemap</a></li>
                    <
li><a href="<{$xoops_url}>/search.php">Zoeken</a></li>
                </
ul>
            </
li>
            
            <
li>
              <
a href="<{$xoops_url}>/modules/log/">Log</a>
                  <
ul>
                    <
li><a href="<{$xoops_url}>/modules/log/">Laatste logs</a></li>
                    <
li><a href="<{$xoops_url}>/modules/log/archive.php">Archief</a></li>
                </
ul>
            </
li>

            <
li>
              <
a href="<{$xoops_url}>/modules/newbb/">Forum</a>
                  <
ul>
                    <{if 
$kubrick_selector == TRUE}>
                      <
li><a href="<{$xoops_url}>/newbb+search.htm">Zoeken in forum</a></li>
                      <
li><a href="<{$all_link}>">Active topics</a></li>
                      <
li><a href="<{$unread_link}>">Ongelezen topics</a></li>
                    <{/if}> 
                </
ul>
            </
li>
            
          <{/if}>
        </
ul>


It should work now. As you might have noticed, there is a PM inbox count.
<{if $msgcount 0}>
  <
class="highlight" href="<{$xoops_url}>/viewpmsg.php">PM inbox (<span style="color:red; font-size:10px; font-weight: bold;"><{$msgcount}></span>)</a>
<{else}>
  <
a href="<{$xoops_url}>/viewpmsg.php">PM inbox</a>
<{/if}>

If you want to use that, add this to the top of your theme.html:
<{if $xoops_isuser}>
<{
php}>
    GLOBAL 
$xoopsUser;
    
$pm_handler =& xoops_gethandler('privmessage');
    
$uid $xoopsUser->getVar('uid');
    
$criteria = new CriteriaCompo(new Criteria('read_msg'0));
    
$criteria->add(new Criteria('to_userid'$uid));
    
$msgcount $pm_handler->getCount($criteria);
    
$GLOBALS['xoopsTpl']->assign('msgcount'$msgcount);
<{/
php}>
<{/if}>

Besides letting you incorporate a PM warning in the menu, you can use this anywhere you want (in the theme files).

Need some more info on the inner workings and possibilities of this menu, see this site and this site

One last note: I’m not a pro, like StudioC for example. I mess with the code, and if it works, it works .
I am the BEST.......... at overstating things! - Resized Image

spankee

Just popping in
Posted on: 2006/3/28 18:12
spankee
spankee (Show more)
Just popping in
Posts: 89
Since: 2005/11/13
#2

Re: [How to] Create a nice (static) dropdown menu.

Wow! I wasn't looking for something like this...but it is exactly what I need.
Thanks

spankee

Just popping in
Posted on: 2006/4/2 2:08
spankee
spankee (Show more)
Just popping in
Posts: 89
Since: 2005/11/13
#3

Re: [How to] Create a nice (static) dropdown menu.

I finely got around to trying out your code on 2.0.13 but it did not work for me.
It showed all the links vertically listed.
Also the PM link showed up at the very top of the page.

ladon

Quite a regular
Posted on: 2006/4/2 10:01
ladon
ladon (Show more)
Quite a regular
Posts: 284
Since: 2003/10/31
#4

Re: [How to] Create a nice (static) dropdown menu.

Spankee, did you include de menu.js en added all the .css stuff? If you didn't add the javascript it will show the menu vertically in internet explorer because it can't handle proper css.

Concerning de pm warning, where it shows depends entirely on where you place it in your theme.html.

this schould be before everything else:
<{if $xoops_isuser}>
<{
php}>
    GLOBAL 
$xoopsUser;
    
$pm_handler =& xoops_gethandler('privmessage');
    
$uid $xoopsUser->getVar('uid');
    
$criteria = new CriteriaCompo(new Criteria('read_msg'0));
    
$criteria->add(new Criteria('to_userid'$uid));
    
$msgcount $pm_handler->getCount($criteria);
    
$GLOBALS['xoopsTpl']->assign('msgcount'$msgcount);
<{/
php}>
<{/if}>


and this where you want the warning to be displayed:

<{if $msgcount 0}>
  <
class="highlight" href="<{$xoops_url}>/viewpmsg.php">PM inbox (<span style="color:red; font-size:10px; font-weight: bold;"><{$msgcount}></span>)</a>
<{else}>
  <
a href="<{$xoops_url}>/viewpmsg.php">PM inbox</a>
<{/if}>


Hope this helps you
I am the BEST.......... at overstating things! - Resized Image

spankee

Just popping in
Posted on: 2006/4/2 22:47
spankee
spankee (Show more)
Just popping in
Posts: 89
Since: 2005/11/13
#5

Re: [How to] Create a nice (static) dropdown menu.

No, it still is not working. I attached some screen shots below to show the problem.

This is a screen shot.
http://img346.imageshack.us/my.php?image=opened6bc.jpg

This is a screen shot when the css is put into stylenn.css(Firefox). Is this how should look?
http://img346.imageshack.us/my.php?image=working8om.jpg

spankee

Just popping in
Posted on: 2006/4/13 23:31
spankee
spankee (Show more)
Just popping in
Posts: 89
Since: 2005/11/13
#6

Re: [How to] Create a nice (static) dropdown menu.

I tried this in the Default theme and still did not work.