emlog实现二级菜单导航实战教程
0
1814
2017年9月30日
先来看看演示代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>非常小巧的JS下拉菜单代码</title> <!-- dd menu --> <script type="text/javascript"> <!-- var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out document.onclick = mclose; // --> </script> <style type="text/css"> <!-- #sddm{ margin: 0 auto;padding: 0;z-index: 30;background-color:#F4F4F4;width: 480px;height:23px;} #sddm li{ margin: 0;padding: 0;list-style: none;float: left;font: bold 12px arial} #sddm li a{ display: block;margin: 0 1px 0 0;padding: 4px 10px;width: 60px;background: #5970B2;color: #FFF;text-align: center;text-decoration: none} #sddm li a:hover{ background: #49A3FF} #sddm div{ position: absolute;visibility: hidden;margin: 0;padding: 0;background: #EAEBD8;border: 1px solid #5970B2} #sddm div a{ position: relative;display: block;margin: 0;padding: 5px 10px;width: auto;white-space: nowrap;text-align: left;text-decoration: none;background: #EAEBD8;color: #2875DE;font: 12px arial} #sddm div a:hover{ background: #49A3FF;color: #FFF} --> </style> </head> <body style="text-align:center"> <ul id="sddm"> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">HTML DropDown</a> <a href="#">DHTML DropDown menu</a> <a href="#">JavaScript DropDown</a> <a href="#">DropDown Menu</a> <a href="#">CSS DropDown</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Download</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">ASP Dropdown</a> <a href="#">Pulldown menu</a> <a href="#">AJAX dropdown</a> <a href="#">DIV dropdown</a> </div> </li> <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Order</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">Visa Credit Card</a> <a href="#">Paypal</a> </div> </li> <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Help</a> <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">Download Help File</a> <a href="#">Read online</a> </div> </li> <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Contact</a> <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">E-mail</a> <a href="#">Submit Request Form</a> <a href="http://www.lanrentuku.com/" target="_blank">lanrentuku.com</a> </div> </li> </ul> <div style="clear:both"></div> </body> </html>
从代码中我们可以发现，下拉列表是ID为M下的A标签
那么，我们只要循环显示这个A标签就可以做到下拉效果了
实现方法：
<?php global $CACHE; $sort_cache = $CACHE->readCache('sort'); foreach($sort_cache as $value): ?> <a href="<?php echo Url::sort($value['sid']); ?>" title="<?php echo $value['sortname']; ?>"><?php echo $value['sortname']; ?></a> <?php endforeach; ?>
上面的函数就可以显示EMLOG的分类，当然，你也可以再调用比如标签TAG也可以
EM模板实现方法：
<ul id="sddm"> <li><a href="<?php echo BLOG_URL; ?>" title="<?php echo $blogname; ?>">首页</a></li> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">分类</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <?php global $CACHE; $sort_cache = $CACHE->readCache('sort'); foreach($sort_cache as $value): ?> <a href="<?php echo Url::sort($value['sid']); ?>" title="<?php echo $value['sortname']; ?>"><?php echo $value['sortname']; ?></a> <?php endforeach; ?> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">管理</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <?php if(ROLE == 'admin' || ROLE == 'writer'): ?> <a href="<?php echo BLOG_URL; ?>admin/write_log.php">写日志</a> <a href="<?php echo BLOG_URL; ?>admin/">管理中心</a> <a href="<?php echo BLOG_URL; ?>admin/?action=logout">退出</a> <?php else: ?> <a href="<?php echo BLOG_URL; ?>admin/">登录</a> <?php endif; ?> </div> </li> </ul>
这只简单举例的一个方法罢了，关于美化等自己捣鼓了，记得加CSS和JS代码，简单吧，快去试试吧，效果不错哦
在线咨询
这个主题简介啊