首先看看下面的例子
可能有很多朋友和我以前的爱好一样,喜欢悬停的下拉菜单,所以这里我就将这个代码分享出来。代码分三个部分:1.wordpress模板代码;2.css代码;3.javascript代码。
wordpress模板代码
- <div id="nav_a">
- <ul id="navsite">
- < ?php
- $mycat = $cat;//通过全局变量获取当前cat id
- $cat = get_category_parentID($cat);//获取父类ID,以保证在每页都显示全部分类
- wp_list_cats('use_desc_for_title=1&sort_column=id&sort_order=desc&children=1');
- ?>
- </ul>
- </div>
css代码根据个人模板不同的风格,你可能要对某些参数进行修改,下面是代码,解说将在注释中。
- ul#navsite,
- #navsite ul {
- font: 12px Verdana, sans-serif;
- padding: 0;
- margin: 0;
- list-style: none;
- }
- #navsite li {
- float: left; /* 将li标签水平排列 */
- text-align: center;
- }
- #navsite li ul {
- position: absolute;
- top: auto;
- left: -999em; /*隐藏 */
- }
- * > html #navsite li ul { /* "Tan Hack" for IE Mac only */
- display: none;
- left: auto;
- }
- #navsite li:hover ul,
- * html #navsite li.sfhover ul { /* for IE-Win and other non-IE browsers */
- left: auto;
- }
- * > html #navsite li.sfhover ul { /* "Tan Hack" for IE Mac only */
- display: block; /* IE-Mac gets confused by the left:-999em rule, so we do this. */
- border: 2px solid #778; /* to visually confirm this rule is being used on IE-Mac */
- }
- #navsite li ul li {
- float: none; /* sub-menu items will stack vertically as normal list */
- text-align: left;
- }
- #nav_a ul li A {
- display:block;
- padding-top:4px !important;
- padding-top:8px;
- WIDTH: 130px;
- height:21px !important;
- height:21px;
- color:#ffffff;
- BACKGROUND: red ;/*主菜单色调*/
- }
- #nav_a ul li.current-cat A ,#nav_a ul li.current-cat-parent A {
- BACKGROUND: blue;
- color:#000;
- }
- #nav_a ul li ul.children {
- padding:0 0 5px 0;
- width:130px !important;
- width:127px;
- BACKGROUND: url(images/ulbt.gif) #ffffff no-repeat bottom left;
- }
- #nav_a ul li ul.children li A {
- BACKGROUND: blue;/*二级菜单背景颜色*/
- color:#fff;
- }
- #nav_a ul li ul.children li A:hover {
- BACKGROUND: red;/*二级菜单鼠标悬停背景颜色*/
- color:#fff;
- }
- av_a ul li ul.children li.current-cat A ,#nav_a ul li ul.children li.current-cat-parent A {
- BACKGROUND: green;
- color:#000;
- font-weight:bold;
- }
- #nav_a ul li ul li A {
- display:block;
- padding-top:4px;
- width:130px;
- border:0;
- border-top:1px solid #999900;
- text-indent:4px;
- color:#ffffff;
- height:25px;
- BACKGROUND: url() #99cc00 no-repeat 0px 0px;
- }
javascript代码由于IE不兼容某些css描述,因此这里要用到javascript来弥补之不足,代码如下:
- <script LANGUAGE="JavaScript">
- <!--
- sfHover = function() {
- var sfEls = document.getElementById("navsite").getElementsByTagName("li");
- for (var i=0; i<sfEls.length; i++) {
- sfEls[i].onmouseover=function() {
- this.className+=" sfhover";
- }
- sfEls[i].onmouseout=function() {
- this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
- }
- }
- }
- if (window.attachEvent) window.attachEvent("onload", sfHover);
- else { //IE 5.2 Mac does not support attachEvent
- var old = window.onload;
- window.onload = function() { if (old) old(); sfHover(); }
- }
- //-->
- </script>
建议需要使用的兄弟直接在实例中进行修改:menu.html
鸣谢:部分css代码借鉴了先辈的代码,而javascript则是直接copy过来使用的,由于很久以前使用的,所以忘记css部分代码和js全部代码的原创者是谁了.
标签:HTML客户端, javascript, Wordpress
前2排已经被占据了 快抢好位置哦
不错,学习学习
您好,我想在我把我的网页上Page显示成dropdown menu形式的。但是我不知道怎么把上面的code复制过去。请问能不能赐教下? ^^