wordpress之header设计
<p><span>在激活菜单功能，编辑菜单并且调用后。 </span><br><span>下面主要内容为菜单鼠标悬停效果的实现以及子菜单排版问题。 </span><br><strong>1.菜单鼠标悬停效果的实现 </strong></p>
<div>
<p>
<span><u>复制代码</u></span></p>
<p>
代码如下:</p>
</div>
<p>
<br>
<script type="text/javascript"> <br>
$(function($){ <br>
var current_page=$('#menu-header-menu > .current-menu-ancestor, #menu-header-menu > .current-menu-item, #menu-header-menu > .current_page_item'); <br>
var current_page_class = 'current-menu-item current-page-item current_page_item'; <br>
$('#menu-header-menu > .menu-item').hover( <br>
function(){ <br>
if(this == current_page) return; <br>
current_page.removeClass(current_page_class); <br>
$('.sub-menu', current_page).hide(); <br>
$(this).addClass(current_page_class); <br>
}, <br>
function(){ <br>
if(this == current_page) return; <br>
$(this).removeClass('current-menu-item current-page-item current_page_item'); <br>
current_page.addClass(current_page_class); <br>
$('.sub-menu', current_page).show(); <br>
}); <br>
}); <br>
</script> </p>
<p>
<br><span>其中第一个function()作用为：鼠标移动至相应的菜单上， </span><br><span>能为我们获取到当前所在item，并添加相应的class。 </span><br><span>第二个function()作用为：鼠标移除该菜单项时， </span><br><span>系统能为我们释放刚才获取到的item。 </span><br><span>我们可以通过添加css来突出我们鼠标所选中的item， </span><br><span>如字体突出，添加背景色或者背景图片等。 </span><br><strong>2.菜单排版问题 </strong><br><span>1）菜单栏单列宽度调整 </span><br><span>因为是自动调用后台设置的菜单，而后台菜单可以经常改动， </span><br><span> 这需要对单列菜单的宽度以及背景色背景图片的宽度等进行更改。 </span><br><span> 2）菜单排列 </span><br><span> 默认排列方式为纵向，可以通过float:let;将菜单横向排列。 </span><br><span> 当菜单有自己菜单时，通过css即可设置， </span><br><span> 效果为：当鼠标移动到菜单栏中父级菜单时，子菜单显示出来， </span><br><span> 鼠标移开后，隐藏子菜单，同时释放父级菜单效果。 </span><br><span> 3）与父级菜单类似，自己菜单也通向默认为纵向排列。 </span><br><span> 此时想让子菜单栏横向排列，一个float:left;并不能解决问题。 </span><br><span> 我们需要position:absolute; </span><br><span> 同时还需要添加个left:0; </span><br><span> 此时显示效果为子菜单横向并且靠左排列。 </span><br><span> 注：TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。 </span><br><span> 当设定position:absolute </span><br><span> 如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 </span><br><span> 如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。 </span><br><span> 当设定position: relative </span><br><span>则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY 的左上角为原始点。 </span><br><span> 相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。</span></p>
頁:
[1]