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=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.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 {
margin: 0;
padding: 0 0px 0 0px;
list-style: none;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 8px;
font-weight: bold;
color: #ffffff;
line-height: 20px;
text-indent:0px;
text-align:center;
}
#nav a {
display: block;
width: 11em;
color: white;
}
#nav a:hover, nav a:visited {
display: block;
width: 11em;
color: #333;
}
#nav li {
float: left;
width: 11em;
list-style:none;
}
#nav li ul {
list-style:none;
position: absolute;
background: #4281B7;
width: 11em;
left: -999em;
margin: 0 0 0 -5.45em;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#content {
clear: right;
}
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}>
<a 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}>
<a 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 siteOne last note: I’m not a pro, like StudioC for example. I mess with the code, and if it works, it works
.
