资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/网页顶部导航栏加强（分为左右两部分；添加一个不被污染样式的搜索框）

网页顶部导航栏加强（分为左右两部分；添加一个不被污染样式的搜索框）

yedf / 2395人阅读

摘要：目标中间一段空白把导航栏分为左右两个部分在导航栏上加上一个搜索框，但不被的样式污染。

前置

本文需要对CSS，Vue，ElementUI有基本的了解。

本文以ElementUI提供的导航菜单组件为基础。

本文希望能在此组件基础上实现以下内容：

中间一段空白把导航栏分为左右两个部分

在导航栏上加上一个搜索框，但不被 el-menu-item 的样式污染。

先研究清楚ElementUI的css样式

创建一个简单的网页，在其中使用ElementUI的导航菜单组件。

用Chrome之类的工具对网页检查（F12/Ctrl+Shift+I）后，从 Elements 标签页中定位到导航菜单组件在网页中最后的实现元素。在检查工具下方有 Styles 工具会显示选中的元素的相关样式。提取其中对元素位置有影响以及我不太熟悉的属性。

el-menu

提取后发现有这些和元素位置相关的设置

margin: 0;
padding-left: 0;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;

border-bottom: solid 1px #color;
border-right: none;

display:block;
position: relative;
-webkit-box-direction: normal;

list-style:none;

//使用了::before和::after创建了伪元素（注意，不是伪类。）
::before {
    display: table;
    content: "";
}

::after {
    display: table;
    content: "";
    clear: both;
}

对于出现在以上代码中的但不熟悉不确认作用的属性，以其为关键词（记得加引号以避免搜索引擎错误解析）加css进行搜索，基本上就能找到满意的答案。

margin-block-start 等属性的作用 —— 影响不大

::before 和 ::after —— 伪类
clear:both
搞明白了这里为什么要使用一个::after的伪元素，可以预测该元素下的子元素全都是浮动元素。因此如果放任不管的话，会造成浮动元素的高度不被父元素计算而导致父元素高度为零直接崩掉。所以使用这样一个伪类，由于这个伪类不能允许左右有浮动元素，所以它会使自己的上外边界碰着浮动元素（理想状况下应该排成一行）的那一行的下边界，而这一行的高度（也即浮动元素的高度）就会被计算为父元素的高度了。实际上如果这个伪类自己有高度比如60px,浮动元素那一行的最大高度为60px，则父元素的高度就会是120px了。

box-direction —— 影响不大

在解决了有问题的样式属性后发现，其实整个 el-menu 的最终实现很简单：使用positive:relative但并不带有left top 这一类设置的属性，所以说元素还是留在原地。这里设置positive为relative的理由应当是辅助之后的子元素即导航栏内部的 item 的定位（position:absolute时相对的元素若是position:static这一默认值是会被无视的）。

el-menu-item 
float: left;
position: relative;
display: list-item;

margin: 0;
padding: 0 20px;
height: 60px;
line-height: 60px;
font-size:14px;
box-sizing: border-box;
text-align: -webkit-match-parent;

white-space: nowrap;
cursor: pointer;

float:left和display:list-item同时使用第一时间可能想不明白，但经过自己创建更简单的样例进行测试，可以这么理解：float:left先执行确定下自己的位置，然后执行position:relative，即relative的相对定位相对的“原本的位置”是float:left之后的位置。而之类由于又没有设置top left 之类的属性，可以认为这是为了在其内部再放其它组件的话辅助定位用的。

display: list-item —— 从官方文档来看意思就是说配置这个list-item这个display属性的元素表现出

    的子元素
  • 的样式，从而可以为它配置list-style，并且这是在没有
      这种display的父元素的基础上的。实际上它的父元素也确实是display:block。

      white-space —— white-space CSS 属性是用来设置如何处理元素中的空白。

      cursor —— cursor 属性规定要显示的光标的类型（形状）。

      那么最基本的两个组件最终生成的元素的CSS已经分析完了。动手试试我们一开始的目标吧。

      目标

      中间一段空白把导航栏分为左右两个部分

      在导航栏上加上一个搜索框，但不被 el-menu-item 的样式污染。

      目标1

      我的第一个想法是创建一个 el-menu-item 给它宽度但是不给它内容同时让它disable="true"

      淘宝网

登录
注册

#el-menu-item-placeholder1 {
    width: 80%;
}

      在此状态下创建的导航栏中间确实有了很大一块空白作为区隔，但仍然有如下问题:

      鼠标悬停在空白上时因为:disabled="true"导致鼠标会变成一个禁止通行的图标。

      页面缩小到1000px左右时就已经会让右边的“登录”“注册”新开一行，把整个布局弄得很糟糕。

      对于第一个问题，可以通过cursor属性解决？设置cursor: default;于我们自定义的作为占位符的空白格 el-menu-item 样式中，就解决了。

      对于第二个问题，三个组件总共宽度为218px，占据20%的宽度，则要求100%宽度大于1090px才会不崩盘。所以可以设置 el-menu 的类的样式解决这个问题

      .el-menu {
    min-width: 1090px;
}
#el-menu-item-placeholder1 {
    width: 80%;
    max-width: 80%;
    cursor: default;
}
      目标2

      在解决目标1的基础上，其实已经有了目标2的思路：设置一个:disable="true"的 el-menu-item 来放置一个 el-input 输入框。对这个 el-menu-item 标记 id 属性，然后通过id选择器设置cursor:default。

      实际测试时发现整个输入框被导航栏的背景色给灰蒙蒙地上了一层。显然这一副作用是由于将起禁用而导致的。（对比不禁用时的输入框很正常）。所以用检查工具查看此时的元素，发现其class属性多了一个is-disabled，从而引入了 ElementUI 自带的样式中的 opacity: 0.25 才导致的。那通过id选择器进一步将其覆盖即可。

      最终代码如下：

      淘宝网


    


登录
注册

.el-menu {
    min-width: 1090px;
}
#el-menu-item-placeholder1 {
    width: 80%;
    max-width: 80%;
    cursor: default;
}
#el-menu-item-searchinput-container {
    cursor: default;
    opacity: 1;
}

      最初的两个目标基本都实现了。

      最后

      存一下自己写的东西

      经过这次经历，我算是有点理解到是人在用组件，而不是组件在用人。组件虽然说是一个个已经封装好的成熟的，但绝大部分样式最终实现还是依靠CSS。因此如果能抓住其最终实现的CSS样式进行解析，就能自己进一步自定义化组件了。

      分析组件时要注意样式变化时对应元素的前后变化，比如被 disabled 的 el-menu-item 使得白白净净很好看的内部的 el-input 蒙上了一层背景色，这个时候首先看 el-menu-item 是否多出和 disabled 这件事有关的样式，然后去看 el-input 继承的样式而不必关心原本的样式，因为原本的表现是正常的。

      是人用组件，而不是组件用人。

专线服务 混合云 jQuery搜索框样式 html 添加搜索框 左右滑动的导航 用js制作一个搜索框

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116243.html

相关文章

  • 你们要的HTML布局技巧：如何规范搭建网页架构？

    摘要：主体内容区域小米首页下小米商城的主题内容区域，也是整体网页面积最广的区块实在不知道定主体内容区块时也可以根据面积比重来划分，最大的那块一定是主题中心，布局的重复性很高。 单就深入了解布局规范都足够说上一个月的，今天我就不论大范围，挑选小米网站首页的部分区块布局来讲解吧！ 下面是小米官网的首页，很多人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就...

    yvonne 评论0 收藏0

  • 你们要的HTML布局技巧：如何规范搭建网页架构？

    摘要：主体内容区域小米首页下小米商城的主题内容区域，也是整体网页面积最广的区块实在不知道定主体内容区块时也可以根据面积比重来划分，最大的那块一定是主题中心，布局的重复性很高。 单就深入了解布局规范都足够说上一个月的，今天我就不论大范围，挑选小米网站首页的部分区块布局来讲解吧！ 下面是小米官网的首页，很多人一看到这样的网页就傻眼，不知道咋弄，要么就随性布局，要么就干看着，其实遇到问题首先一点就...

    KaltZK 评论0 收藏0

  • BEM实战之扒一扒淘票票页面

    摘要：扒一扒淘票票界面淘票票界面写的挺美观的，但是最近看了看淘票票的命名方式，觉得稍有不妥。命名与页面内容挂钩，代码复用性低。 BEM解析 BEM是一套CSS国际命名规范，是一个非常有用的功能强大且简单的命名约定，它能使前端代码更易读，易于理解易于扩展。BEM是块（block）、元素（element）、修饰符（modifier）的缩写。 B：Block是块，一个独立的组件，将所有东西都划分...

    godlong_X 评论0 收藏0

  • DIV+CSS学习笔记总结篇

    摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求...

    iOS122 评论0 收藏0

  • DIV+CSS学习笔记总结篇

    摘要：每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格，表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求...

    HackerShell 评论0 收藏0

发表评论

登陆后可评论

0条评论

yedf

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<