洛杉矶MC机房 高速低价18元起

尊云,给你尊贵体验!

wordpress之header设计

提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议在本站搜索商家名称,先充分了解商家动态。
交流:唯一投稿邮箱:hostvps@88.com。

在激活菜单功能,编辑菜单并且调用后。 
下面主要内容为菜单鼠标悬停效果的实现以及子菜单排版问题。 
1.菜单鼠标悬停效果的实现 

复制代码

代码如下:

<script type="text/javascript"> 
$(function($){ 
var current_page=$('#menu-header-menu > .current-menu-ancestor, #menu-header-menu > .current-menu-item, #menu-header-menu > .current_page_item'); 
var current_page_class = 'current-menu-item current-page-item current_page_item'; 
$('#menu-header-menu > .menu-item').hover( 
function(){ 
if(this == current_page[0]) return; 
current_page.removeClass(current_page_class); 
$('.sub-menu', current_page).hide(); 
$(this).addClass(current_page_class); 
}, 
function(){ 
if(this == current_page[0]) return; 
$(this).removeClass('current-menu-item current-page-item current_page_item'); 
current_page.addClass(current_page_class); 
$('.sub-menu', current_page).show(); 
}); 
}); 
</script> 


其中第一个function()作用为:鼠标移动至相应的菜单上, 
能为我们获取到当前所在item,并添加相应的class。 
第二个function()作用为:鼠标移除该菜单项时, 
系统能为我们释放刚才获取到的item。 
我们可以通过添加css来突出我们鼠标所选中的item, 
如字体突出,添加背景色或者背景图片等。 
2.菜单排版问题 
1)菜单栏单列宽度调整 
因为是自动调用后台设置的菜单,而后台菜单可以经常改动, 
   这需要对单列菜单的宽度以及背景色背景图片的宽度等进行更改。 
  2)菜单排列 
   默认排列方式为纵向,可以通过float:let;将菜单横向排列。 
   当菜单有自己菜单时,通过css即可设置, 
   效果为:当鼠标移动到菜单栏中父级菜单时,子菜单显示出来, 
   鼠标移开后,隐藏子菜单,同时释放父级菜单效果。 
 3)与父级菜单类似,自己菜单也通向默认为纵向排列。 
   此时想让子菜单栏横向排列,一个float:left;并不能解决问题。 
   我们需要position:absolute; 
   同时还需要添加个left:0; 
   此时显示效果为子菜单横向并且靠左排列。 
   注:TRBL属性(TOP、RIGHT、BOTTOM、LEFT)只有当设定了position属性才有效。 
     当设定position:absolute 
   如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 
     如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。 
     当设定position: relative 
则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以BODY 的左上角为原始点。 
     相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

About 贝壳

【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

本文链接:贝壳主机网 » wordpress之header设计

分享到: 生成海报
香港/美国/国内高速VPS
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活