当我们的导航菜单需要设置下拉菜单时,或许会要求宽度自适应,因为使用人不同,那么菜单项的内容就会不同,从而字数也不同,这时若定义固定的宽度,当字数超出定义宽度时,就会出现问题了,如何解决呢?采用下面的方法即可实现灵活变化。
一般情况下,带有下拉菜单的导航菜单是这样的一串代码:
<div class=”nav”>
<ul>
<li><a href=”#”>首页</a></li>
<li><a href=”#”>新闻中心</a>
<ul>
<li><a href=”#”>国内新闻</a></li>
<li><a href=”#”>xx </a></li>
<li><a href=”#”>xxxxxx</a></li>
</ul>
</li>
</ul>
</div>
若要实现 .nav ul li ul 的宽度随内容变化,需在css文件中做出以下定义:
.nav ul li ul{width:auto;}
.nav ul li ul li{display:inline;}
.nav ul li ul li a{display:inline-block; min-width:80px; white-space:nowrap;}
这里的ul、li、a会有写属性继承自上层,可根据自己需要定义。
注释:white-space:nowrap 表示不换行,直至遇到<br/>为止。
min-width:80px 设置最小宽度,根据需要,可用可不用。
在之前的建网站的教程中,我们给大家讲了如何制作网站导航的二级导航,通过DIV+CSS的方式,可以制作出网站的二级菜单。这种方法是可能帮助我们去制作出内容固定的二级菜单出来,需要手动的修改二级导航里面的内容,才能变成属于我们自己需要的二级导航栏。
今天给广大学习如何做网站的学员介绍另一种更加方便快捷的wordpress下拉菜单制作的方法,它的内容是自动显示我们后台的菜单设置的内容。
wordpress下拉菜单制作步骤
- 放一个jquery-xl.js到主题文件夹下的images文件夹;下载地址:https://pan.baidu.com/s/1eQH7EP8
- 将以下的代码放到自己网站模板头部文件header.php的</head>标签的上方。
<script language=”javascript” type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/images/jquery-xl.js”></script>
- 删除原有的网站导航的整个DIV框,这个DIV框可以通过火狐浏览器的“审查元素”来找到;
- 将以下的HTML代码放在上一步删除的导航的位置;(相关教程:html视频教程)
<div id=”navnew”>
<?php wp_nav_menu( array( ‘container’ => ”,’menu_class’ => ‘navigation’,’menu_id’ => “nav_sgBhgn”,’depth’ => 5, ) ); ?>
</div>
<script type=”text/javascript”>
var topMenuNum = 0;
$(“#nav_sgBhgn li”).hover(
function(){
topMenuNum++;
$(this).attr(“id”,”kindMenuHover”+topMenuNum);
$(“#kindMenuHover” + topMenuNum + ” > ul”).show();
$(this).parent().addClass(“hover”);
},
function(){
$(“#”+$(this).attr(“id”)+” > ul”).hide();
$(this).attr(“id”,””);
$(this).parent().removeClass(“hover”);
}
);
</script>
- 将以下的CSS样式加入到自己网站模板的style.css的底部。
/*wordpress下拉菜单,二级菜单制作 https://www.xuewangzhan.net/*/
#navnew {line-height: 60px; width: 100%; background: #3598db; height: 60px}
#navnew .navigation {margin:0 auto;width:980px;height:100%;}
#navnew .navigation li {height:60px;line-height:60px;width:100px; z-index: 100; POSITION: relative;text-align:center; FLOAT: left;border-right:1px solid #2f89c5;}
#navnew .navigation li A {display: block; height: 100%;width:100%; TEXT-DECORATION: none;color: #ffffff;font-size:16px;}
#navnew .navigation li:hover{background: #2f89c5;}
#navnew .navigation li ul li,#navnew .navigation li ul li ul li,#navnew .navigation li ul li ul li ul li{border-right:none;border-top:1px solid #2f89c5;}
#navnew .navigation ul {display: none}
#navnew .navigation ul li {line-height: 60px; width: 101px;background: #3598db; height: 60px;}
#navnew .navigation li ul {z-index: 999; POSITION: absolute; width: 100px; display: none; background: #0099ff; TOP: 60px;}
#navnew .navigation li ul ul {z-index: 999; TOP: 0px; left: 101px}
- 进入网站后台,在左侧有一个菜单的选项,可以创建菜单,通过拖拉就可以随意的修改自己网站的导航和二级导航内容。
- 有些学习如何做网站的学员使用的主题可能没有开启后台菜单功能,如果你进入网站后台后没有“菜单”选项的话,可以在自己网站的模板函数functions.php中加入以下的函数来开启菜单。
//添加菜单功能
if (function_exists(‘add_theme_support’)) {
add_theme_support(‘nav-menus’);
register_nav_menus( array( ‘primary’ => __( ‘Primary Navigation’, ‘primary’ ) ) );
}
通过以上的步骤,我们可以在自己建网站时创建一个wordpress下拉菜单,如果你想制作三级,四级菜单,方法可以参考网站三级菜单、四级菜单制作。