前端 ---小米导航案例

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        .box{
            width: 960px;
            /*height: 60px;*/
            overflow: hidden;
            margin: 0 auto;
            /*border: 1px solid green;*/
        }
        .box ul li{
            float: left;
            /*width: 160px;*/
            /*height: 60px;*/
            line-height: 60px;
            text-align: center;

        }
        .box ul li a{
            text-decoration: none;
            display: block;
            width: 40px;
            height: 60px;
            color: #000;
            padding: 0 60px;
            background-color: yellow;
        }
        .box .show{
            width: 100%;
            height: 200px;
            position: absolute;
            /**/
            top: 60px;
            left: 0;
            border-top: 1px solid #666;
            border-bottom: 1px solid #666;
            border-left: 1px solid #666;
            border-right: 1px solid #666;

            display: none;
            box-shadow: 0 0 5px #777;
        }
        .box .show.active{
            display: block;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <a href=" ">小米手机</a >
            <div class="show">
                <div class="container">
张三
                </div>
            </div>
        </li>
        <li>
            <a href="#">小米手机</a >
            <div class="show">
                <div class="container">
李四
                </div>
            </div>
        </li>
        <li>
            <a href="#">小米手机</a >
            <div class="show">
                <div class="container">
王五
                </div>
            </div>
        </li>
        <li>
            <a href="#">小米手机</a >
            <div class="show">
                <div class="container">
赵六
                </div>
            </div>
        </li>
         <li>
            <a href="#">小米手机</a >
            <div class="show">
                <div class="container">
武七
                </div>
            </div>
        </li>
         <li>
            <a href="#">小米手机</a >
            <div class="show">
                <div class="container">
哈哈哈哈
                </div>
            </div>
        </li>
</div>
        <script type="text/javascript" src=‘jquery-3.3.1.js‘></script>
        <script type="text/javascript">
    $(function(){
        // 控制当鼠标第一次呼入的动画效果
          var animated = false;

        $(‘.box>ul>li>a‘).mouseenter(function(ev){

            // 下面代码时鼠标第一次滑入a标签的动画效果
            if(!animated){
                animated = true;
                var jQa = $(this);
                jQa.css(‘color‘,‘#F52809‘)
                // next()表示当前标签的紧挨着的兄弟标签
                $(this).next("div").stop().slideDown(600);
            }else{

                 var jQa = $(this);
                      // 修改a标签的样式
                  jQa.css(‘color‘,‘#F52809‘).parent(‘li‘).siblings(‘li‘).children(‘a‘).css(‘color‘,‘black‘);
                  // 切换下面显示区域的内容
                  jQa.next(‘div‘).stop().show().parents(‘li‘).siblings(‘li‘).children(‘.show‘).stop().hide();

            }

        });
        // 鼠标进入到下方区域,保持不变
          $(‘.show‘).mouseenter(function(ev){

            $(this).stop().show();
        })
          // 鼠标离开下方区域
           $(‘.show‘).mouseleave(function(ev){

            $(this).stop().slideUp(300);
            animated = false
        })
           // 鼠标离开导航栏列表
        $(‘.box‘).mouseleave(function(ev){

            console.log($(ev.target));
            $(ev.target).next("div").stop().slideUp(300);
            animated = false;

        });

    })

</script>
</body>
</html>

原文地址:https://www.cnblogs.com/liuafan/p/9525891.html

时间: 2024-11-07 13:44:53

前端 ---小米导航案例的相关文章

8 清除浮动方式/小米导航案例

清除浮动方式之伪元素清除法: <style type="text/css"> .top_bar{ height: 200px; border:1px solid red; } .child1{ width:200px; height:200px; background-color: green; float: left; } .child2{ width: 200px; height:200px; background-color: orange; float: right

小米导航案例

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; } .box{ width: 960px; /

前端网址导航

前端导航 前端网址导航 前端名录 前端导航 前端开发资源 前端开发仓库 - 众多效果的收集地 前端资源导航 F2E 前端导航 前端收藏夹 前端导航 前端工具箱 前端人俱乐部-灵感_Idea

29.前端css小米导航栏设置及定位问题

1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } /*取消前面的点*/ ul{ list-style: none; } .nav{ width: 960px; overflow:

HTML前端--各种小案例

掬一捧清水,放逐在江河,融入流逝的岁月,将心洗净; 捻一缕心香,遥寄在云端,在最深的红尘里重逢,将心揉碎; 望一程山水,徘徊在月下,在相思渡口苦守寒冬,将心落寞. 案例一: 隐藏扩展域,并去掉after,并去掉高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty

优秀网站看前端 —— 小米Note介绍页面

刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的坑,不过咱挂个优雅点的名字——“优秀网站看前端”,顾名思义的,也是寻觅一些值得玩味的趣味网站,来学习它们的前端技术和交互理念. 作为本系列的开篇,我们拿“买手机送国土”的小米来打头阵,缘由是鄙人有着更换手机的打算又刚好看上小米note高配版,于是逛了下小米note的介绍页面,感觉交互做的挺不错,特别

07- 小米导航案例

代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; } .box{ width: 960px; /

五彩导航案例

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a.one{ 8 display:inline-block; 9 height:58px; 10 width:120

前端代码发布案例参考

看了两个个知乎的回答, 自己总结下. 大公司里怎样开发和部署前端代码?回答一 非覆盖发布: 文件的摘要信息放到资源文件发布路径中, 这样内容有修改的文件变成了一个全新的文件, 不会覆盖之前的文件 先全量部署静态资源, 再灰度部署页面. 大公司里怎样开发和部署前端代码?回答二 回答二: 简单情况下的发布方式 前提: 前后端发布分离 前端渲染, 不考虑SSR和BFF服务的发布, 只考虑页面发布. 简单场景下: 可以使用中间托管服务FE getaway方式, 网站入口和所有配置, 主要功能如下: 页面