前面一篇关于wp_nav_menu方法的使用说明,
这里对wordpress的header的一些具体操作作详细说明。
在激活菜单功能,编辑菜单并且调用后。
下面主要内容为菜单鼠标悬停效果的实现以及子菜单排版问题。
1.菜单鼠标悬停效果的实现
<script type=
"text/javascript"
>
|
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(
|
if
(
this
== current_page[0])
return
;
|
current_page.removeClass(current_page_class);
|
$(
'.sub-menu'
, current_page).hide();
|
$(
this
).addClass(current_page_class);
|
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();
|
其中第一个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 的左上角为原始点。
相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。
分享到:
相关推荐
有些博主的博导航菜单设计的非常漂亮,这对于精通CSS的朋友来说,不是件难事,可对于不懂这些的朋友来说,有点小麻烦,所以,这款酷炫的导航菜单插件也就应运而生了。 Multi-level Navigation Plugin可以将导航菜单...
整款主题的设计来自小米社区的 CMS 风格,用于 IT 博客非常合适,黑色酷炫的 header 更给访客强烈的科技感。首页的 1 张大图、4 张小图足够展现今日站点的新鲜内容;在功能上也毫不逊色,支持二级菜单,支持统计浏览...
WordPress主题Lemani是一款响应式设计的手工肥皂蜡烛珠宝等手工制品企业建站主题,基于Elementor页面编辑器插件构建,支持一键导入演示内容,具有以下主要特点: 主题特色 华丽的主页布局 Elementor Page Builder ...
相反,尝试将我变成下一个最令人敬畏的WordPress主题。 那就是我在这里的目的。 我的超小型CSS可能会让我看起来像主题art,但这意味着在设计出色主题时会遇到一些麻烦。 这是您在这里可以找到的其他一些更有趣的...
页眉(header)区域包含Logo,导航条,搜索栏。为了做到井然有序,分别创建3个文件用来放置logo,导航条和搜索栏的图层文件。制作一个基本形状容纳页眉里的所有元素。选用矩形工具(Rectangle Tool)创建一个960像素...
WordPress组件主题这是一个简约的WordPress骨架/基础主题,遵循受ReactJS影响的基于组件的组织系统。 该主题的设计和开发理念围绕将css,js和php组织到ui目录下的组件文件夹中。 查看./ui/site-navigation ,以获取...
而是尝试将我变成下一个最棒的 WordPress 主题。 这就是我来这里的目的。 我的极简 CSS 可能让我看起来像鞑靼主题,但这意味着当你设计你的真棒主题时,阻碍你的东西更少。 以下是您可以在这里找到的其他一些更...
相反,尝试将我变成下一个最令人敬畏的WordPress主题。 那就是我在这里的目的。 我的超小型CSS可能会让我看起来像主题art,但这意味着在设计出色主题时会遇到一些麻烦。 这是您在这里可以找到的其他一些更有趣的...
我的极简 CSS 可能让我看起来像鞑靼主题,但这意味着当你设计你的真棒主题时,阻碍你的东西更少。 以下是您可以在这里找到的其他一些更有趣的东西: 恰到好处的精益、评论良好、现代的 HTML5 模板。 一个有用的 ...
添加header 的keyword,descript 等SEO meta 标签 多说服务器缓存加速Gravatar 头像 v1.0 2014-10-25 发布初版 主题介绍 Bevework 主题是DeveWork.com 的Jeff 开发的一款黑色系风格的WordPress 博客主题,设计来源于...
相反,尝试将我变成下一个最令人敬畏的WordPress主题。 那就是我在这里的目的。 我的超小型CSS可能会让我看起来像主题art,但这意味着在设计出色主题时会遇到一些麻烦。 这是您在这里可以找到的其他一些更有趣的...
相反,尝试将我变成下一个最令人敬畏的WordPress主题。那就是我在这里的目的。我的超小型CSS可能会让我看起来像主题art,但这意味着在设计出色主题时会遇到一些麻烦。这是您在这里可以找到的其他一些更有趣的东西:...
相反,尝试将我变成下一个最令人敬畏的WordPress主题。 那就是我在这里的目的。 我的超小型CSS可能会让我看起来像主题art,但这意味着在设计出色主题时会遇到一些麻烦。 这是您在这里可以找到的其他一些更有趣的...
XIU主题是一款Wordpress主题,支持百度熊掌号,适用于图片展示、多元化图片新闻展示、个人博客、资源分享站,扁平化设计、简洁风、全面SEO优化、多重列表展示方式 ,响应式布局支持电脑、平板和手机的完美展示。...
相反,尝试将我变成下一个最令人敬畏的WordPress主题。那就是我在这里的目的。我的超小型CSS可能会让我看起来像主题art,但这意味着在设计出色主题时会遇到一些麻烦。这是您在这里可以找到的其他一些更有趣的东西:...
雨夹雪主题:WordPress主题样板=== 你好我是一个名为sleet的入门主题,因为我讨厌冬天的雨夹雪和雪泥。 我是一个主题,旨在从头开始进行主题开发。 那就是我在这里的目的。 我的超小型CSS可能会让我看起来像主题art...
相反,尝试将我变成下一个最令人敬畏的WordPress主题。 那就是我在这里的目的。 我的超小型CSS可能会让我看起来像主题art,但这意味着在设计出色主题时会遇到一些麻烦。 这是您在这里可以找到的其他一些更有趣的...
我的超小型CSS可能会让我看起来像主题art,但这意味着在设计出色主题时会遇到一些麻烦。 这是您在这里可以找到的其他一些更有趣的东西: 带有预制命令行界面的现代化工作流程,可将您的项目转变为更愉悦的体验。 ...
而是尝试将我变成下一个最棒的 WordPress 主题。 这就是我来这里的目的。 我的极简 CSS 可能让我看起来像鞑靼主题,但这意味着当你设计你的真棒主题时,阻碍你的东西更少。 以下是您可以在这里找到的其他一些更有趣...