css 导航条-一步一步教你写一个很酷的导航栏JS+CSS实现

bendan520 2023年8月21日 css 0

学习制作导航栏步骤

分步，然后在文末做一个综合页面，分享给大家一个炫目的导航栏供大家参考，具体内容如下

1. 当前页面高亮显示的导航栏

第一个是HTML代码，很简单，ul+li实现菜单




  
  导航栏一


  
    
      
        Android
        C++
        IOS
        Java
        Ruby
      
    
  
首页

基本功效：

设置 CSS 属性后，这里要注意 tag a 是行级元素，所以需要使用 display 来转换为块级元素，这是很常见的，而且行高也有常见的用法

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }

达到的功效：

最后，JS动态增加定位效能

JS，

页面跳转会有链接，根据链接的后缀来匹配属性，匹配样式可以达到想要的效果

需要注意的是如何获取 URL 以及如何从 URL 中查找 href 信息

$(function(){
  //当前链接以/分割后最后一个元素索引
  var index = window.location.href.split("/").length-1;
  //最后一个元素前四个字母,防止后面带参数
  var href = window.location.href.split("/")[index].substr(0,4);
 
  if(href.length>0){
    //如果匹配开头成功则更改样式
    $(".list li a[href^='"+href+"']").addClass("on");
    //[attribute^=value]：匹配给定的属性是以某些值开始的元素。
  }else {
    //默认主页高亮
    $(".list li a[href^='index']").addClass("on");
  }
});

功效表

2.内置导航栏进行手动切换

在1的基础上，更改HTMLa标签的内容，然后通过CSS设置动漫效果

CSS要达到动画效果，先将b和i标签设置为块级元素，这样就可以垂直分布，然后设置一个过渡为a，所谓动漫css 导航条，就是把A改上去后收录，再给A加边框好好观察，见右图。

最后，如果要达到效果，请在包菜单的 div 中设置一个溢出隐藏属性

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; overflow: hidden; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
              .list b,.list i{ display: block; }
.list li a:hover{ margin-top: -40px; background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }

也可以用JQ实现，代码如下

$(function () {
  $(".list a").hover(function () {
    //stop是当执行其他动画的时候停止当前的
    $(this).stop().animate({
      "margin-top": -40
    }, 300);
  }, function () {
    $(this).stop().animate({
      "margin-top": 0
    }, 300);
  });
});

3.回火菜单实现

首先，子菜单用 div 包裹，上面都有一个 A 标签，如下所示


  Android

  
    子菜单1
    子菜单2
    子菜单3
    子菜单4

由于它是一个子菜单css 导航条，因此需要与文档页面分离，因此请使用 absolute 属性，并使用此属性使父容器必须是相对的

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
.list b{ display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
.list .down{ position: absolute; top: 40px; background-color: #222; /*display: none;*/ }
.list .down a{ color: #aaa; padding-left: 30px; display: block; }
h1{ margin: 20px auto; text-align: center; }

以下疗效：

拿起它并使用JQ和缓动插件来控制动漫

find 方法通常用于查找动作元素的后代

$(function () {
  $(".list li").hover(function () {
    //这里使用了easing插件
    $(this).find(".down").stop().slideDown({duration:1000,easing:"easeOutBounce"});
  }, function () {
    $(this).find(".down").stop().slideUp({duration:1000,easing:"easeOutBounce"});
  });
});

疗效，画面录制不是很好，其实都是弹性动漫。

css中元素不能向前选择，即不能选择父元素或前兄弟元素；这受 DOM 渲染规则的约束；这个好像很容易理解，html是一种从内层到内层的渲染机制；如果能上去渲染就会出现渲染无力、性能等问题；

改变DOM的位置和视野，从而达到改变显示的疗效

兄弟选择器只能选择前面的元素，但所表达的“后面”是指代码层面的侧面，我们可以通过改变水平线的效果来实现“前兄弟选择器”的效果；即把元素放在前面，通过修改样式或者文档流程，使其显示在视图前面；

显示的疗效如右图所示：

实现方式有以下几种：（1）flex布局

flex布局中有一个flex-direction属性，可以控制元素水平或垂直的呈现顺序；

实现的代码如下：

<style>
    .cs__flex {
        display: inline-flex;
        flex-direction: row-reverse;
    }
    .form__input:focus ~ .form__input-lab {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs__flex">
	<input type="text" class="form__input" placeholder="请输入用户名"><label class="form__input-lab">用户名：</label>
</div>

(2)浮动浮动

这种技术的兼容性非常好，容器的长度应该根据子元素的长度来估计；

<style>
    .cs__float {
        width: 275px;
    }
    .form__input {
        width: 200px;
        float: right;
    }
    .form__input:focus ~ .form__input-lab {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs__float">
    <input type="text" class="form__input" placeholder="请输入用户名"><label class="form__input-lab">用户名：</label>
</div>

(3)绝对属性

使用margin预留位置，通过定位展示在你的面前

<style>
    .cs__absolute {
        position: relative;
    }
    .form__input {
        margin-left: 64px;
    }
    .form__input-lab {
        position: absolute;
        left: 0;
    }
    .form__input:focus ~ .form__input-lab {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs__absolute">
    <input type="text" class="form__input" placeholder="请输入用户名"><label class="form__input-lab">用户名：</label>
</div>

(4)方向属性

改变文档流的顺序css 选择器，实现DOM位置和视图位置的交换；兼容性好，易于理解，唯一的缺点是必须针对行内元素；

<style>
    .cs__direction {
        direction: rtl;
    }
    .form__input,
    .form__input-lab {
        direction: ltr;
    }
    .form__input-lab { // 针对的是内联元素
        display: inline-block;
    }
    .form__input:focus~.form__input-lab {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs__direction">
    <input type="text" class="form__input" placeholder="请输入用户名"><label class="form__input-lab">用户名：</label>
</div>

:focus-within 伪类选择器，类似于“父选择器”

:focus-within 匹配当前元素或者当前子元素处于焦点；和 :focus 匹配当前元素；

这个属性非常实用css 选择器，本质上是一种“父选择器”行为。子元素的状态会影响父元素的样式；这可以类比css中很难向前选择元素的情况，因此可以实现正常的DOM顺序，而无需Handicapped样式反例；

示例代码如下：

<style>
    .cs-normal:focus-within .cs-label {
        color: darkcyan;
        text-shadow: 0 0 1px;
    }
</style>
<div class="cs-normal">
    <label class="cs-label">用户名：</label><input type="text" class="">
</div>

使用：has(); 注意：尚不支持

<style>
li:has(> a.active){
    color:red;
}
</style>
<ul>
    <li>
        <a href="#" class="active">1</a>
    </li>
    <li>
        <a href="#">2</a>
    </li>
</ul>

网上也提到：has()伪类的使用，目前还没有浏览器支持该属性，所以这里不过多讨论，只是为了事先了解；

css 导航条-一步一步教你写一个很酷的导航栏JS+CSS实现

首页

发表评论

发表回复取消回复

首页

相关文章

发表评论

发表回复 取消回复

发表回复取消回复