主页 > 建站相关 >

织梦dede下拉菜单实现代码教程 下拉菜单与子栏目

2018-07-10 17:19 阅读:195 来源:智宇SEO自媒体

  刚看了一下网站文章的发布日期,智宇自媒体是5月27号上线的。到现在已经一个多月了。网站模板改了很多次,特别是导航就已经改了两次。从当时定位的首页关键词来看,这个博客主要是SEO,推广,运营这三块文章的更新。随着时间的推移,我发现SEO或者其他的文章也没什么好写的,写来写去就那么几句话。今天想再把导航整一整,同时把博客的栏目重新规划一下。让博客栏目分类更清晰。

织梦dede下拉菜单实现代码教程 下拉菜单与子栏目

  现在网站栏目主要分为:熊掌号,SEO知识,网站建设,推广,运营,这几块这属于智宇工作的部分。而后面随笔,占星和“好玩”栏目属于智宇的个人兴趣。这里插一句话,为什么要把熊掌号和SEO分开,因为智宇觉的熊掌号运营是未来几年SEO新的工作形式。而传统的SEO技术将慢慢走出人们的视野。百度官方曾经说过,百度没有权重的说法。但熊掌号指数将是未来百度的网站权重。这句话很清晰的说明,熊掌号一旦真正成熟起来,很多传统的SEO技术将被淘汰掉。现在熊掌号还没全方位铺开,相信到了所有做网站的第一时间里想到的都是熊掌号的时候,熊掌号运营专员将取代SEO专员。

  智宇自媒体现在的定位是个人独立博客,包括工作和生活。这样可以让个人博客内容更丰满。智宇想长期运营这个博客,学习也好,分享也好。只有兴趣的才是长远的。

  好了啰嗦了这么多,下面切入正题。

  智宇自媒体要将SEO部分栏目归成一类。导航以下拉形式展现这些分类。解决的思路很简单。在dede后台新建一个顶级栏目,取名“SEO知识”,然后将与SEO相关的几个栏目移动到这个栏目下面,这样SEO相关的栏目都成了“SEO知识”的子栏目。导航显示“SEO知识”,下拉显示各个子栏目。子栏目的移动后台操作一看就懂,就不多介绍了。

织梦dede下拉菜单实现代码教程 下拉菜单与子栏目

  导航用下拉框调用二级栏目的代码贴图:

织梦dede下拉菜单实现代码教程 下拉菜单与子栏目

  具体代码如下:
 

<ul class="nav navbar-nav" id="menu-navigation">
     <li><a href="http://www.shenhuangji.com">首页</a></li>																																								                  
	{dede:channelartlist typeid='top' row='10'} 
          <li>
              <a href='{dede:field name='typeurl'/}' >
                 {dede:field name='typename'/} </a>
		<ul>
		{dede:channel type='son' noself='yes'} 
			<li><a href='[field:typelink/]'>[field:typename/]</a></li>
		 {/dede:channel} 
		 </ul>
          </li>
	{/dede:channelartlist}
  </ul>

  另外说一点下拉菜单的要用CSS或者JS控制的,如果不懂下拉菜单的原理,智宇这里贴一段比较简短的下拉菜单CSS代码。看懂下面代码,就能很好的改造你想要的dede下拉菜单调用二级栏目的结果了。

  简单的下拉菜单实现CSS代码:

<!DOCTYPE html>  
<html>  
<head>  
  <title>下拉菜单实例|菜鸟教程(runoob.com)</title>  
  <meta charset="utf-8">  
  <style>  
  .dropdown {   
      position: relative;   
      display: inline-block;   
  }   
  .dropdown-content {   
      display: none;   
      position: absolute;   
      background-color: #f9f9f9;   
      min-width: 160px;   
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   
      padding: 12px 16px;   
  }   
  .dropdown:hover .dropdown-content {   
      display: block;   
  }   
  </style>  
</head>  
<body>  
<h2>鼠标移动后出现下拉菜单</h2>  
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>  
<div class="dropdown">  
  <span>鼠标移动到我这!</span>  
  <div class="dropdown-content">  
    <p><a>菜鸟教程</a></p>  
    <p><a>www.runoob.com</a></p>  
  </div>  
</div>  
</body>  
</html>