深喉咙企业网站系统社区's Archiver

深喉咙CMS PHP3.8版本

trashgod 发表于 2008-8-30 16:40

为首页导航菜单栏增加下拉子菜单

[i=s] 本帖最后由 trashgod 于 2009-4-15 16:37 编辑 [/i]

为首页导航菜单栏增加下拉子菜单，暂时只做了一级子菜单，其实可以做很多级。
先贴效果图，再贴代码，给大家分享一下。

同时实现了product产品类型频道的子类别，这是个特殊的频道，官方是没有列出子类别来的。

[color=#FF0000][b]大家注意，我把修改过的模板文件全部打包放在附件了，可以直接下载回去玩。[/b][/color]

trashgod 发表于 2008-8-30 16:41

对了，是纯CSS制作的，频道管理在后台修改就行，程序自动生成导航栏 [s:3]

trashgod 发表于 2008-8-30 17:20

[i=s] 本帖最后由 ysuny 于 2009-2-5 16:47 编辑 [/i]

首页增加导航菜单的下拉子菜单


修改模板下面的index.php文件，首先在头部的meta部分导入下拉菜单用到的css js文件，这两个文件单独提供。
<style type="text/css">
<!--
@import"./inc/js/nav-h.css";
-->
</style>
<!--[if gte IE 5.5]>
<script language="JavaScript" src="./inc/js/nav-h.js" type="text/JavaScript"></script>
<![endif]-->

#######################################################################


然后找到<div id="nav">这个块，修改php代码如下：



        <div id="nav">
            <ul id="navmenu-h">
                <li><a href="<?php echo get_root_path() ?>"><span>首页</span></a></li>
<?php
            global $db,$params,$request;  //自己生成导航下拉菜单

                $menuRoot = $db->get_results("select * from ".TB_PREFIX."menu  where deep=0 [color=#ff0000]and isHidden=0 [/color]order by ordering asc"); //生成所有菜单根节点数组，按deep

parentid获取

        if(!empty($menuRoot)){
            foreach($menuRoot as $o)
            {
              echo '<li><a href="./?p='.$o->id.'"><span>'.$o->title.'</span></a>';

                  if($o->type=="product"){//产品频道特殊，子分类在不同的表格查找
                             $submenuRoot=$db->get_results("select * from ".TB_PREFIX."product_category where channelId =".$o->id." and deep=0 order by

ordering asc"); //获取产品子栏目节点
                     if(!empty($submenuRoot)){
                             echo '<ul>';
                 foreach($submenuRoot as $osub)
                  {
                           echo '<li><a href="./?p='.$o->id.'&c='.$osub->id.'">'.$osub->title.'</a></li>';
                  }
                             echo '</ul>';
                 }//有产品子节点内容
                          }else{                           
                             $submenuRoot=$db->get_results("select * from ".TB_PREFIX."menu  where parentid=".$o->id." [color=#ff0000]and isHidden=0[/color] order by ordering asc"); //获取子栏目

节点
                     if(!empty($submenuRoot)){
                             echo '<ul>';
                 foreach($submenuRoot as $osub)
                  {
                           echo '<li><a href="./?p='.$osub->id.'">'.$osub->title.'</a></li>';
                  }
                             echo '</ul>';
                 }//有子节点内容
                          }
                          echo '</li>';
            }
        }//有可输出内容
?>
             </ul>

        </div>


#######################################################################
nav-h.css 样式表，可以自己根据需要改一改，目前只用到了两层菜单，还比较简单的。nav-h.js就照搬不需要动。

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  border: 0 none;
  padding: 0;
  width: 812px; /*For KHTML  导航菜单宽度，可以根据需要改一下*/
  list-style: none;
  height: 32px;
  float:left;
  margin:0;
  display:inline;
}

ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;

  margin-right:5px;
}

ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
}

ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-h ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu 主菜单的链接样式，可以使用不同的背景图，hover动作有个切换效果帅一些*/
ul#navmenu-h a {
height:32px; float:left; padding:0 0 0 10px; background:url(navbgl.jpg) no-repeat left top; color:#333; text-decoration:none; line-height:14px; letter-

spacing:1px;
}
ul#navmenu-h a span{
float:left; display:block; background:url(navbgr.jpg) no-repeat right top; padding:10px 20px 8px 10px; color:#fff; text-align:center;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
ul#navmenu-h a span{float:none;}
/* End IE5-Mac hack */

ul#navmenu-h a:hover span{ color:#666;}
ul#navmenu-h a:hover{ background-position:0% -32px;}
ul#navmenu-h a:hover span { background-position:100% -32px;}

ul#navmenu-h li:hover span{ color:#666;}
ul#navmenu-h li:hover a{ background-position:0% -32px;}
ul#navmenu-h li:hover span{ background-position:100% -32px;}

ul#navmenu-h li.iehover span{ color:#666;}
ul#navmenu-h li.iehover a{ background-position:0% -32px;}
ul#navmenu-h li.iehover span{ background-position:100% -32px;}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  /*background: #CCC;*/
  /*color: #FFF;*/
}

/* 2nd Menu 子菜单的样式，可以改改颜色 字体 边框色，能搭配出不错的效果*/
ul#navmenu-h ul a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EEE;
  color: #CCC;
  font:  12px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence 子菜单的保持效果，也就是鼠标到下一级子菜单时，这个保持什么效果*/
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}

ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}

trashgod 发表于 2008-8-30 17:22

也不能叫纯CSS，但是那个JS不用管，不需要用户去看他的代码。只写自己的<ul><li>列表就行了

ysuny 发表于 2008-8-31 11:09

哈哈。感谢楼主的慷慨，说的真详细

shuanger 发表于 2008-9-1 15:56

楼主真是个好人，支持了！

win0niw 发表于 2008-9-2 15:59

一上来就看到好东西，支持楼主

win0niw 发表于 2008-9-2 16:19

论坛里的文字直接复制每句会加很多乱码，很不方便！

trashgod 发表于 2008-9-2 20:01

ls的兄弟，直接复制到写字板应该还好吧？需要源码的话可以给你

win0niw 发表于 2008-9-3 16:37

这么慷慨？连模板一起发给我吧，学习一下 [s:1141]
我的邮箱[email]xiaobing4947@163.com[/email]，呵呵得寸进尺了

shuanger 发表于 2008-9-3 17:09

[quote]引用第9楼win0niw于2008-09-03 16:37发表的 :
这么慷慨？连模板一起发给我吧，学习一下 [s:1141]
我的邮箱[email]xiaobing4947@163.com[/email]，呵呵得寸进尺了[/quote]
回楼上的。这个模板在模板发布区有下载啊
看这个帖子：http://www.deepthroat.com.cn/bbs/read.php?tid=6095

win0niw 发表于 2008-9-3 18:09

[quote]引用第10楼shuanger于2008-09-03 17:09发表的 :

回楼上的。这个模板在模板发布区有下载啊
看这个帖子：[url]http://www.deepthroat.com.cn/bbs/read.php?tid=6095[/url][/quote]
[attach]101[/attach] [attach]102[/attach]
这两点就和模板发布区的有很大区别啊，虽然看上去差不多。。。关注楼主这个网站
另外看到楼主发的另外个帖子讲产品子栏目了，高手！

shuanger 发表于 2008-9-3 18:14

噢，原来你是想要楼主加过子菜单后的模板啊，呵呵，理解错误了！ [s:202]

trashgod 发表于 2008-9-3 20:54

[quote]引用第11楼win0niw于2008-09-03 18:09发表的 :

[attach]748[/attach] [attach]749[/attach]
这两点就和模板发布区的有很大区别啊，虽然看上去差不多。。。关注楼主这个网站
另外看到楼主发的另外个帖子讲产品子栏目了，高手！[/quote]
我就把修改过的目录和模板发给你，压缩了不到2MB，你自己覆盖过去，或者参考一下

win0niw 发表于 2008-9-3 23:09

哈哈，谢谢了，我去看看

win0niw 发表于 2008-9-4 11:53

[attach]94[/attach]
导航菜单弄好了
[attach]95[/attach]
整体效果

shuanger 发表于 2008-9-4 15:41

楼上改的效果很好嘛，不过还是要感谢楼主的奉献精神才能让更多的用户受益。2个人都加分奖励！

trashgod 发表于 2008-9-5 08:43

[quote]引用第15楼win0niw于2008-09-04 11:53发表的 :
[attach]760[/attach]
导航菜单弄好了
[attach]761[/attach]
整体效果[/quote]
恭喜恭喜，看来你还是有点代码功底的，改得没一点问题。
那个导航切换的绿色背景图片要是觉得不协调，可以换换颜色

kdeey 发表于 2008-9-7 15:19

楼主，有一个很大的问题，希望抽时间改进，就是下拉菜单那一项，现在的现象是这样：比如我们把某个频道在后台隐藏了，但目前用这个下拉菜单效果后，会把原本隐藏的频道或栏目还是会在前台显示出来了．

trashgod 发表于 2008-9-8 09:13

[quote]引用第18楼kdeey于2008-09-07 15:19发表的  :
楼主，有一个很大的问题，希望抽时间改进，就是下拉菜单那一项，现在的现象是这样：比如我们把某个频道在后台隐藏了，但目前用这个下拉菜单效果后，会把原本隐藏的频道或栏目还是会在前台显示出来了．[/quote]
谢谢，之前我也注意到这个问题了，只是自己还没用到隐藏频道，所以偷懒了。我改一下数据库查询语句就行了，红色标出的地方加了and isHidden=0

//######################################
      global $db,$params,$request; //自己生成导航下拉菜单

        $menuRoot = $db->get_results("select * from ".TB_PREFIX."menu where deep=0 [color=#FF0000]and isHidden=0 [/color]order by ordering asc"); //生成所有菜单根节点数组，按deep

parentid获取

    if(!empty($menuRoot)){
      foreach($menuRoot as $o)
      {
       echo &#39;<li><a href="./?p=&#39;.$o->id.&#39;"><span>&#39;.$o->title.&#39;</span></a>&#39;;

         if($o->type=="product"){//产品频道特殊，子分类在不同的表格查找
               $submenuRoot=$db->get_results("select * from ".TB_PREFIX."product_category where channelId =".$o->id." and deep=0 order by

ordering asc"); //获取产品子栏目节点
           if(!empty($submenuRoot)){
               echo &#39;<ul>&#39;;
         foreach($submenuRoot as $osub)
         {
              echo &#39;<li><a href="./?p=&#39;.$o->id.&#39;&c=&#39;.$osub->id.&#39;">&#39;.$osub->title.&#39;</a></li>&#39;;
         }
               echo &#39;</ul>&#39;;
         }//有产品子节点内容
             }else{              
               $submenuRoot=$db->get_results("select * from ".TB_PREFIX."menu where parentid=".$o->id." [color=#FF0000]and isHidden=0[/color] order by ordering asc"); //获取子栏目

节点

kdeey 发表于 2008-9-8 23:07

楼主,还有一个问题，不知是我这边程序的原因，还是．．．
我现在用了下拉菜单后，发现在ＩＥ６．０能显示正常，在ＩＥ７．０就不正常了．
在ＩＥ６．０与７．０的区别图片
ie6.0[attach]89[/attach]

ie7.0 [attach]90[/attach]

trashgod 发表于 2008-9-9 10:01

[quote]引用第20楼kdeey于2008-09-08 23:07发表的 :
楼主,还有一个问题，不知是我这边程序的原因，还是．．．
我现在用了下拉菜单后，发现在ＩＥ６．０能显示正常，在ＩＥ７．０就不正常了．
在ＩＥ６．０与７．０的区别图片
ie6.0[attach]813[/attach]

.......[/quote]
看起来菜单还是排列整齐的，相对位置和切换效果也没有问题。
应该是你的导航栏外层DIV的CSS属性问题，对齐或者空白写的不对。
这个导航代码通用性还是很好的，你方便的话把网址发过来我们帮你看看

sjdtll 发表于 2008-9-9 17:08

好东西就要顶！！！ [s:98]

kdeey 发表于 2008-9-9 23:59

[quote]引用第21楼trashgod于2008-09-09 10:01发表的 :

看起来菜单还是排列整齐的，相对位置和切换效果也没有问题。
应该是你的导航栏外层DIV的CSS属性问题，对齐或者空白写的不对。
这个导航代码通用性还是很好的，你方便的话把网址发过来我们帮你看看[/quote]


我是在本地上测试的，还没有虚似主机空间．我加你ＱＱ，到时你在线时帮我看看．

页: [1] 2 3 4 5

Powered by Discuz! Archiver 7.0.0  © 2001-2009 Comsenz Inc.