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 的左上角为原始点。
     **定位是不能层叠的。在应用**定位时,无论元素能否进行挪动,元素仍然占据原来的空间。因而,挪动元素会招致它笼罩其余框。

以上就是安达网络工作室关于《wordpress之header设计》的一些看法。更多内容请查看本栏目更多内容!

本文相关话题: wordpress header
版权声明:本文为 安达网络工作室 转载文章,如有侵权请联系我们及时删除。
相关文章
再Docker中架设完好的WordPress站点全攻略

1. 装置 Docker 在咱们真正开端之前,咱们需求确保在咱们的 Linux 机器上曾经装置了 Docker。咱们应用的主机...

WordPress文章摘要小记

其实我集体并不是很喜爱这种摘要的显示形式,然而这个办法用起来比拟不便而已。   WordPress是有摘要性能...

对于WordPress的SEO优化相干的一些PHP页面脚本技巧

随着搜寻引擎大兴, 陈列在前的网站引入大量流量. 无论是搜寻页面的广告还是查进去的后果, 与搜寻者的指标婚...

在SAE上搭建最新wordpress的办法

装置SAE上的wordpress,创立使用抉择wordpress模板,装置后是3.4版本 新建一个版本2,下载最新wordpress装置...

WordPress数据库的根本结构及各表构造

WordPress应用MySQL数据库。作为一个开发者,咱们有必要把握WordPress数据库的根本结构,并在本人的插件或主...

WordPress直达义HTML与过滤链接的相干PHP函数应用解析

esc_html()(本义 Html) esc_html() 函数用来本义 Html 代码,让 Html 代码不本义。 用法 esc_html( $tex...

需求提交

客服服务

亿鸽在线客服系统