• 售前

  • 售后

热门帖子
入门百科

wordpress之header设计

[复制链接]
馥琳 显示全部楼层 发表于 2021-8-15 19:26:18 |阅读模式 打印 上一主题 下一主题
在激活菜单功能,编辑菜单并且调用后。
下面重要内容为菜单鼠标悬停结果的实现以及子菜单排版问题。
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 的左上角为原始点。
     相对定位是不能层叠的。在利用相对定位时,无论元素是否举行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作