Javascript实现简易导航栏

本文实例为大家分享了Javascript实现简易导航栏的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>导航</title>
</head>
<style>
        button{
              width:80px;
              height:25px;
              border:none;
        }
          #b1{
             background-image: url('1.png');
             margin-right:0px;

          }
          #b2{
             background-image: url('1.png');
             width:380px;
             height:25px;
             text-align: left;

          }
         #b1:hover{
            background-image: url('2.png');
         }
         #b2:hover{
            background-image: url('2.png');
         }

</style>

<body>
    <div style="width: 800px;margin:0px auto">

    <div>
            <img src="1.jpg" width="100%" height="150px%">
    </div>
    <div>
            <div style="font-size: 1px">
                    <button type="button" id="b1">网站首页</button>
                    <button type="button" id="b1">网站新闻</button>
                    <button type="button" id="b1">网站趣闻</button>
                    <button type="button" id="b1">网站论坛</button>
                    <button type="button" id="b1">网站介绍</button>
                    <button type="button" id="b2">招纳贤士</button>

            </div>

    </div>
     </div>
</body>
</html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 一步步教大家编写酷炫的导航栏js+css实现

    一步步教大家编写酷炫的导航栏js+css实现

    一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏一</title> </head> <body>

  • JavaScript实现滑动导航栏效果

    JavaScript实现滑动导航栏效果

    本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.

  • JS 实现导航栏悬停效果

    JS-实现导航栏悬停 先布个局: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <met

  • Fullpage.js固定导航栏-实现定位导航栏

    Fullpage.js固定导航栏-实现定位导航栏

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和移动设备. 开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自动定位到这一页的标签 2.当然点击标签时,也是滚动到那一页而不是直接跳转的. 一.准备工

  • JavaScript实现鼠标点击导航栏变色特效

    废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • 原生JS实现 MUI导航栏透明渐变效果

    mui内置有H5版本的透明渐变导航控件,教程参考mui官网:透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果: 下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果,具体内容详情如下所示: 首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器 css代码 body,p,h1{margin: 0;} .module-layer{ width: 100%; positio

  • JS 实现导航栏悬停效果(续)

    JS 实现导航栏悬停效果(续)

    上次[JS-实现导航栏悬停]说到,导航栏悬停的那个页面在IE上运行的时候,会出导航栏不停的抖动问题. 解决方法如下: 将导航栏的定位方式由原来的absolute改为fixed,也不知道为什么改为fixed,就不抖了..-_-|| 复制代码 代码如下: div.navigation{ width: 800px; height: 40px; background: red; margin: 4px auto 0; top: 400px; left: 0px; position: fixed; } 为

  • js导航栏单击事件背景变换示例代码

    如下所示; 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

  • JS滚动到指定位置导航栏固定顶部

    最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0

  • JavaScript NodeTree导航栏(菜单项JSON类型/自制)

    JavaScript NodeTree导航栏(菜单项JSON类型/自制)

    最近比较清闲,自己做了个JavaScript NodeTree,网上类似的东西其实挺多的,功能也比这个全,我做这个纯粹为了练练手. 图标可以自定义(16X16),菜单项完全是JSON类型定义的,方便修改. 界面: 使用方法: 1.将NodeTree-JSON.js以及CSS文件夹复制到项目中并引用. 2.引用JQuery框架. 3.修改NodeTree-JSON.js中的NodeTreeMenu菜单项,以下是简单说明. 复制代码 代码如下: var NodeTreeMenu = [ //id:节

随机推荐