Phpcms V9导航循环下拉菜单的调用技巧

这个方法基于PC V9官方模版中的调用方法,然后利用后台的“Phpcms V9菜单是否显示设置”控制菜单是否显示出来。

先看看最后的效果:

调用方法:

<div id="navbar">
    <div id="navbarcontent">
        <div id="menu">
            <ul id="menuul">
            {pc:content action="category" catid="0" num="25" siteid="$siteid" order="listorder ASC"}
                <li><div><a href="{siteurl($siteid)}/"><span>网站首页</span></a></div></li>
                <li><img width="1" height="45" src="{siteurl($siteid)}/style/images/navline.gif"></li>
                {loop $data $k $v}
                <li>
                    <div>
                        <a href="{$v[url]}"><span>{$v[catname]}</span></a>
                        <ul class="sub_mune_ul" style="display: none; ">
                        {pc:content action="category" catid="$k" num="10" siteid="$siteid" order="listorder ASC"}
                        {loop $data $r} <li><a href="{$r[url]}">{$r[catname]}</a></li> {/loop}
                        {/pc}
                        </ul>
                    </div>
                </li>
                {if $v[catid]==5}{else}
                <li>
                    <img width="1" height="45" src="{siteurl($siteid)}/style/images/navline.gif">
                </li>
                {/if}
                {/loop}
            {/pc}
            {php echo runhook(‘glogal_header‘)}
            </ul>
        </div>
    </div>
</div>

在这个代码里边,我把外部的的DIV标签页带上了,这是完整的代码,为了更好的定义CSS,如果只是调用数据,那么只要{pc}语句中间的部分就好了。

大家可以看到<li>标签里边,我还设置了一个div,这个div里边的循环就是下拉菜单的子栏目。

控制不显示的栏目菜单方法:

后台菜单:内容 > 内容相关设置 > 管理栏目 >,设置如下:

在这里,调用代码中的{php echo runhook(‘glogal_header‘)}作用巨大,后台设置“是否在导航显示”选择“否”,那么就在导航菜单循环中不显示,这句代码把后台的设置响应到具体调用了,起到了这个作用。

上面说的具体只是数据调用的方法,要做到下拉导航菜单,还需要CSS和JS的配合。

大家可以找一个静态html的下拉菜单,然后用上面的调用方法,定义到现有的下拉菜单中。

时间: 2024-08-04 21:30:21

Phpcms V9导航循环下拉菜单的调用技巧的相关文章

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

华丽导航CSS下拉菜单特效

华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.huiyi8.com/fengjing/

NAV导航栏———下拉菜单

利用CSS实现导航栏菜单—下拉菜单. 首先给出HTML下拉菜单布局格式: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figure 6.5 Drop-Down Menus</title> <link rel="stylesheet" type="text/css&

Css之导航栏下拉菜单

Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#333; /*固定在顶部*/ /*position:fixed; top:0; width:100%;*/ } li{ float:left; } li a, .dropbtn { display:inline-block; color:whi

导航页面下拉菜单

<script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ //鼠标经过一级菜单,二级菜单动画下拉显示出来 var subnav = this.getElementsByTagName('ul')[0]; if(subnav){ var This = subnav

js导航二级下拉菜单

<!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-

bootstrap-导航加下拉菜单(二级导航)

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>导航加下拉菜单(二级导航)</title>     <!-- 最新版

【特效】导航下拉菜单(二级三级都有)

导航的下拉菜单,分别写了二级的和三级的.其实下拉菜单最重要的是写好结构,哪一层是哪一层的,要清晰,做到心中有数. css定位时注意给隐藏的下拉菜单添加absolute绝对定位,但是其父级不必加relative.js嘛,简单,一个hover() 打遍天下.动画用了slideDown,slideUp,fadeIn,fadeOut,当然可换成其他效果,动画前加了stop() 是为了快速多次滑动时,不会一直闪呀闪个不停. html: <h1>二级下拉菜单</h1> <ul class

CSS 下拉菜单

使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果. 1.下拉菜单的实现 当鼠标移入指定元素时,显示下拉菜单.代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简单的下拉菜单</title> 6 <style> 7 .dropdown{ 8 position:relative; 9 display: