创建带图文的超级菜单(导航菜单)(二)
Avada带有一个超级菜单功能,基本是在WP原有的基础上扩充的。功能还是挺好用,下面说下如何创建比较漂亮的超级菜单。
此文内容主要在于理解超级菜单和其他项目的逻辑关系。搞清楚它的逻辑你就好操作了。
本文目录
- 1. 整体思路
- 2. 其他须知
- 3. 创建菜单
- 4. 开启超级菜单
- 5. 添加小工具
- 6. 给小工具添加内容
- 7. 设置背景图像和小工具
整体思路
Avada的超级菜单,实际上是通过调用小工具来实现的效果,所以下文中你会看到我们会创建一些小工具。并且在超级菜单设置里选择上要显示的小工具。
本教程中超级菜单延时我们创建3二级菜单。这样能铺满整个顶部好看一些。教程只演示第一个,其他的操作相同。
其他须知
下面的话有点绕,但是很多小白不给他写出来的话。他就是不知道怎么回事,有一定经验的可以跳过本段内容。
为了能够实时预览到超级菜单的显示效果,实际上我们先随便搞了一下网站的全局顶部内容。在菜单中随便先创建一个菜单。并选择显示位置为“Main Navigation”这个导航主菜单。
然后在Avada设置中将全局顶部显示超级菜单。
上面截图这一步中的head是我创建的一块内容,类似于页面。他会显示到网站所有顶部中。所以你可以直接理解为是个导航栏。
实际上这个head类似于一个页面,只不过布局是导航类型。我们类似于将一个页面显示到了网站全局顶部。
创建菜单
我们正常创建一个菜单。
这个菜单将要被我们显示到网站全局顶部导航。所以你可以思考下要显示哪些导航内容。
开启超级菜单
我们一级菜单需要设置下开启超级菜单,设置为3列。
添加小工具
这里博主准备创建一个带有3个图片的二级导航。所以添加3个小工具,具体数量根据自己情况决定。
给小工具添加内容
小工具的内容我们随便新建一个页面,然后使用avada编辑器编辑。
添加新容器,容器列数选择1列。
点击“element”添加元素,元素选择分隔器。因为我们图片是有一定高度的,为了显示好看,我们加一个分隔器,在图片上部分隔出来一段空白,让文字显示在图片下半部分。
分隔器让他只显示再大屏幕上,防止小屏幕上显示错乱。这一点需要慢慢调整分隔器的大小参数。本文受长度限制就不进行小屏幕的细调了。
分隔器参数中,我们设置让他距离底部10%。分隔器颜色给他选择全透明的。右侧透明度拉到底即可。
你也可以直接填入:rgba(255,255,255,0)
然后点“默认编辑器”我们添加一些文本。(在默认编辑器添加文本最后出来的代码比较简洁)
点击“文本”查看他的代码,将其复制下来。
回到我们小工具设置页面,给menu-1小工具添加一个文本小工具。
把前面我们的内容,复制到小工具文本里。
设置背景图像和小工具
因为我们要创建带有图片的导航。所以这里的图片大小以及风格最好统一。
图片大小不限,建议是长宽比例1:2左右。大致符合你的展示情况即可。
示例图片:
打开菜单编辑页面,我们给作品集下面添加一些自定义链接。
添加后我们需要把里面的URL再删掉!
点击“Avada菜单选项”。添加背景图像。
设置好了背景图像,我们再选择一下要显示的小工具。这里选择menu-1小工具。
然后超级菜单列标题需要关闭!
完成后保存菜单!!
到这里我们超级图文菜单第一个二级菜单就完成了,其他两个操作方法相同。依次添加即可。
3个都添加完成后效果如下。
可能感觉还是一般,具体的细节需要自己微调了。
主要还是调整填入小工具中的代码。
创建带图文的超级菜单(导航菜单)(二)相关推荐
- animate用法 js原生_用 原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
- HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效
这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法 在页面中引入jquery和TweenMax.js的 ...
- 弧形背景html,JS实现带圆弧背景渐变效果的导航菜单代码
本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用Java ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
- Fragment创建添加切换和对应底部导航(二)
目标:可以滑动Fragment来导航. 原来是通过FragmentManager添加Fragment后,show和hide来显示和隐藏Fragment. 这里使用Viewpager和FragmentP ...
- 学习Bootstrap知识记录点-----导航菜单操作
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 导航元素 本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 ...
- 来自数据库的MVC 6动态导航菜单
目录 目标 介绍 使用的组件 创建Web项目 迁移 数据服务 导航菜单 接下来是什么 结论 Download source code - 977.3 KB 目标 几年前,我不得不从数据库加载导航菜单并 ...
- 如何在WordPress中制作导航菜单(7个功能点)
在wordpress中添加导航菜单是初级的操作,但对于新手而言依旧会遇到一些问题,接下来我们就逐一讲解. 什么是导航菜单 导航菜单通常位于网站的顶部和底部,用于方便用户快速打开关键页面,譬如下方两张图 ...
- 第11节-导航菜单(经典菜单) | 剑雨Axure RP9系列【基础】
此菜单分为水平方向(Horizontal)与垂直方向(Vertical).可自定义菜单项的数量,同时也可自定义子菜单数. 父菜单会自动添加具有MouseOn(鼠标移入时)的交互,在WEB浏览器中会自动 ...
最新文章
- 你的AI模型有哪些安全问题,在这份AI攻防”词典”里都能查到
- vim配置php语法高亮
- 第十七节:ES6新增的Map和WeakMap 又是什么东西?
- 用汉堡包的方式评价一下自己的合作伙伴
- C++ 类的多态四(虚析构函数的重要性)
- matplotlib之pyplot模块——绘制对数线图(loglog()、semilogx()、semilogy())
- word2010删除作者信息
- Python最简单的图片爬虫,只用20行代码爬遍全网
- 白痴qwerta的胡言乱语(一句话日度感想?
- 平果手机桌面计算机,苹果手机怎么做老系统文件夹-苹果手机桌面怎么建文件夹...
- mysql版网络验证自动发卡功能
- PHP:include包含文件局部引入全局变量失效的作用域问题
- 6.1. Inserting Data
- ios关于农历的一些操作
- 常见的动画效果(二)
- 关于spac 'en'错误(主要是服务器一直搞不好的看过来)
- 5 分钟,带你了解MVP(最低可行性产品)
- PHP表单(get,post)提交方式
- 遭到黑客攻击被敲诈勒索该不该交保护费?
- 明日之后维尔市服务器找不到,明日之后:迁徙计划仅对“部分人”开启,果然没有想象中那么简单...