导航条样式代码

最新推荐文章于 2024-05-04 02:41:05 发布
最新推荐文章于 2024-05-04 02:41:05 发布
阅读量813 收藏
点赞数 1
分类专栏： Web前端库 文章标签： 导航 导航条样式 css html

参考博文:这里写链接内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>

        a{
            text-decoration: none;
            cursor: pointer;
        }
        nav{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9000;
            width: 100%;
            height: 50px;
            background-color: #ddd;
        }
        nav>div{
            color: #9e9e9e;
            background-color: #ffffff;
            width: 218px;
            left: 0;
            position: absolute;
            top: 0;
            height: 50px;
            cursor: pointer;
        }
        nav>div div{
            position:absolute;
            height: 50px;
            pointer-events: none;
            width: 100%;
            padding-left: 20px;
            box-sizing: border-box;
            transform: translateZ(25px);
        }
        nav>div div:last-child{
            background-color: #000000;
            color: #ffffff;
            transform: rotateX(90deg) translateZ(25px);
        }
        nav>div div h1{
            font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
            font-size: 16px;
            line-height: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        nav>div div span{
            display: block;
            width: 16px;
            height: 3px;
            margin-left: -1px;
            margin-top: 4px;
            background-color: #c7c7c7;
        }
        nav>div div:last-child span{
            background-color: #e74c4c;
        }
        nav>div a{
            color:#9e9e9e;
            position: absolute;
            height: 50px;
            width: 100%;
            box-sizing: border-box;
            transition:transform .2s;
            transform-style: preserve-3d;
        }
        nav>div:hover a{
            transform: rotateX(-90deg);
        }
    </style>

</head>
<body>


<nav>
    <div>
        <a href="tool.html">
            <div>
                <h1>TOOL</h1>
                <span></span>
            </div>
            <div>
                <h1>TOOL</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="work.html">
            <div>
                <h1>WORK</h1>
                <span></span>
            </div>
            <div>
                <h1>WORK</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="360.html">
            <div>
                <h1>VR/360</h1>
                <span></span>
            </div>
            <div>
                <h1>VR/360</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="directors.html">
            <div>
                <h1>DIRECTORS</h1>
                <span></span>
            </div>
            <div>
                <h1>DIRECTORS</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="awards.html">
            <div>
                <h1>AWARDS</h1>
                <span></span>
            </div>
            <div>
                <h1>AWARDS</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="about.html">
            <div>
                <h1>ABOUT</h1>
                <span></span>
            </div>
            <div>
                <h1>ABOUT</h1>
                <span></span>
            </div>
        </a>
    </div>
    <div>
        <a href="contact.html">
            <div>
                <h1>CONTACT</h1>
                <span></span>
            </div>
            <div>
                <h1>CONTACT</h1>
                <span></span>
            </div>
        </a>
    </div>
</nav>






<script src="js/jquery-1.8.2.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">
    $("nav>div").css("left", function (i) {
                return i * 220;
            }
    );
    $("nav>div").click(function () {
        var href = $(this).children().eq(0).attr("href");
        $(window).attr("location", href);
    });
</script>
</body>
</html>
公众号Java3y
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端代码分享——常用的手机端底部导航栏（内含源码）
Why_does_it_work的博客
07-14 2426
【代码】前端代码分享——常用的手机端底部导航栏。
横条导航窗体html代码,各式各样的导航条效果css3结合jquery代码实现
weixin_29098391的博客
06-09 3006
导航条的使用很广，每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条，比如具有高亮显示的导航条，中英文互相切换的导航条，具有弹性动画的导航条，甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色，比如高亮显示的导航条看起来比较简单，但是视觉效果还不错，具有动画效果的导航条在视觉上也是有很好的效果。接下来将会一一介绍4种应用比较广的导航条，即：高亮显示的导...
php网页设计导航栏代码,总结7种常见的导航条制作实例
weixin_35032509的博客
03-10 2941
导航条是网页设计中不可缺少的部分，它是指通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。利用导航条，我们就可以快速找到我们想要浏览的页面。今天分享一下简单导航栏的制作方法：第一步：引入css样式表，新建一个id为nav的层，使用、、标签来制作完成效果。这篇文章主要为大家详细介绍了微信小程序实战之顶部导航栏...
Android底部导航栏实现
最新发布
2401_83704125的博客
05-04 888
官方文档ViewPager是android扩展包androidX包中的类，旧版的是在v4包中，ViewPager就是一个简单的页面切换组件，可以往里面填充多个View，然后可以左右滑动，从而切换不同的View。ViewPager类直接继承了ViewGroup类，所以它是一个容器类，可以在其中添加其他的view类。和ListView，GridView一样，也需要一个Adapter(适配器)将View和ViewPager进行绑定，而ViewPager则有一个特定的Adapter——PagerAdapter。
CSS+DIV设计导航条源代码
Allen
11-02 4653
HTML代码： "http://www.w3.org/TR/html4/loose.dtd"> DIV+CSS商品分类下拉导航菜单  全部商品分类   各地名优茶 热门 西湖龙井 金骏眉 大红袍 铁观音  名茶 红茶 绿茶 乌龙茶 黑茶 白茶
HTML导航栏的四种制作方法
热门推荐
lovey030821的博客
10-17 15万+
1.首先，大家可以直接使用html5中的导航栏标签&lt;nav&gt;&lt;/nav&gt; 具体代码如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航栏&lt;/title&gt; &lt;/
jQuery紫色斜角导航条样式代码.zip
07-04
jQuery紫色斜角导航条样式代码是一款基于jquery实现的类似动画效果的网站导航菜单特效。
bootstrap导航条实现代码
12-29
本文实例为大家分享了bootstrap导航条的具体代码，供大家参考，具体内容如下 <body style=padding-top:50px> <!-- navbar 导航条的基础样式 nav navbar-nav 导航条里菜单的固定样式组合class navbar-...
jQuery紫色斜角导航条样式特效代码
03-20
jQuery紫色斜角导航条样式代码是一款基于jquery实现的类似动画效果的网站导航菜单特效。
CSS3 3D样式导航菜单代码
06-05
CSS3 3D样式导航菜单代码是一款纯CSS3实现的带有3D立体效果的网站导航条动画特效。
自定义导航条样式ios
04-01
自定义导航条，包括颜色、图片以及上面的按钮。说明：在iOS5.0以上版本，要想navigation bar上面也能显示木质图片，要更改“WoodUINavigationAppDelegate.m”文件的一段代码：[navigationController.navigationBar ...
30种CSS导航菜单风格代码
12-31
绝对漂亮、实用，近35款各式各样、五颜六色的导航菜单样式，纯CSS实现，再也不用苦思冥想那些风格样式了。
多种多样的导航栏样式
01-28
多种多样的导航栏样式，很多款选择，肯定酷炫！
CSS 导航条 10个实例
03-22
NULL 博文链接：https://af8991.iteye.com/blog/977375
12种网页导航栏的样式
10-12
12种常见的网页导航栏，可以看看有没有自己喜欢的或着是需要的
21中导航栏的样式+源代码
05-11
在外看到的21种非常漂亮的导航栏样式，因为不是自己的，所以不要分，呵呵
如何用最简洁的css代码写一个导航栏
weixin_44408679的博客
09-26 3731
如何用最简洁的css代码写一个导航栏 首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容。 注：标签主要是用于设置超链接。 <div> <img src="logo.png"> <a href="#">首页</a> <a href="#">游戏中心</a> <a href="#">游戏社区</a> <a href="#">游戏动态</a>
前端-01-编写简单的导航栏
CCjedweat的博客
01-20 5542
导航栏 基础的HTML语法我就不讲了，这写在W3C、菜鸟教程、壹佰教程等都能找到，下边我就分享一个前端导航栏是怎么写出来的： 1、工具 俗话说，工欲善其事，必先利其器，分享一个写前端的利器，Hbuilder，现在已经升级为HbuilderX了，但是我还是比较喜欢用Hbuilder，这个看你自己选择。 上图就是Hbuilder，具体怎么用呢，嘿嘿，去百度吧，教程遍地都是。 2、效果图 回归正题，展...
无序列表如何做一个导航条?html&,如何使用无序列表制作导航菜单.docx
weixin_29182481的博客
06-04 3589
第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是：首页产品介绍服务介绍技术支持立刻购买联系我们第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： 首页产品介绍服务介绍技术支持立刻购买联系我们 CSS定义为：.test ul{list-s...
导航条怎么换样式
05-29
导航条的样式可以通过CSS进行修改。一种简单的方法是使用CSS中的属性选择器，如下所示： ``` /* 修改导航条的背景色 */ nav { background-color: #333; } /* 修改导航条链接的样式 */ nav a { color: #fff; text-decoration: none; padding: 10px; } /* 修改当前选中的导航条链接的样式 */ nav a.active { background-color: #fff; color: #333; } ``` 通过以上CSS代码，你可以修改导航条的背景色、链接的样式以及当前选中的链接的样式等。当然，具体的修改方式还取决于你的具体需求和设计风格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值