wordpress之header设计-蚂蚁资源

wordpress之header设计

这里对wordpress的header的一些具体操作作详细说明。 在激活菜单功能,编辑菜单并且调用后。

下面主要内容为菜单鼠标悬停效果的实现以及子菜单排版问题。


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 的左上角为原始点。

     相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"www.antziyuan.com",如遇到无法解压的请联系管理员!

蚂蚁资源 » wordpress之header设计

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
该资源仅供学习和研究传播,大家请在下载后24小时内删除,一切关于该资源商业行为与我们无关。 请勿将该软件进行商业交易、转载等行为,该软件只为研究、学习所提供,该软件使用后发生的一切问题与本站无关。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
找不到素材资源介绍文章里的示例图片?
对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
蚂蚁资源
大家都喜欢的资源网站!
  • 49会员总数(位)
  • 801资源总数(个)
  • 8本周发布(个)
  • 8 今日发布(个)
  • 185稳定运行(天)

提供最优质的资源集合

立即查看 了解详情
升级SVIP尊享更多特权立即升级