b2c信息网

您现在的位置是:首页 > 未分类 > 正文

未分类

网页滑动导航菜单制作(滑动导航栏)

hacker2022-06-28 01:45:28未分类89
本文目录一览:1、网页导航条怎么做?2、网页设计导航是怎么做的

本文目录一览:

网页导航条怎么做?

1、打开Deamweaver8,新建一网页文件。接着输入以下导航菜单的内容:

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title导航栏示例/title

/head

body

ul id="navigation"

li/li

lia href="#"首    页/a/li

lia href="#"我的博客/a/li

lia href="#"互动交流/a/li

lia href="#"开心一刻/a/li

lia href="#"悬 赏 令/a/li

li/li

/ul

/body

/html

2、此时对应效果如图:

3、接下来准备相关的导航按钮图片(可以事先利用PS制作好)。

4、然后将以下CSS代码加入到head/head之间:

style type="text/css"

body {text-align:center;}

#navigation

{ list-style-type:none; height:auto;}

#navigation li { width:154px; height:60px; text-align:center;

float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书";

background-image:url(images/noactive.jpg);}

a {width:154px; height:72px;}

a:link { text-decoration:none; color:#FFFF00;}

a:visited { text-decoration:none; color:#FFFF00; }

#navigation li:hover { color:#CC0000; text-decoration:underline;

background-image:url(images/active.jpg);}

a:hover{ color:#CC0033;}

#left {background-image:url(images/left.jpg); width:22px;}

/style

5、在加入CSS代码之间,网页此时的效果如图:

网页设计导航是怎么做的

1、打开Deamweaver8,新建一网页文件。接着输入以下导航菜单的内容:

html xmlns="网址"

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title导航栏示例/title

/head

body

ul id="navigation"

li/li

lia href="#"首    页/a/li

lia href="#"我的博客/a/li

lia href="#"互动交流/a/li

lia href="#"开心一刻/a/li

lia href="#"悬 赏 令/a/li

li/li

/ul

/body

/html

2、此时对应效果如图:

3、接下来准备相关的导航按钮图片(可以事先利用PS制作好)。

4、然后将以下CSS代码加入到head/head之间:

style type="text/css"

body {text-align:center;}

#navigation

{ list-style-type:none; height:auto;}

#navigation li { width:154px; height:60px; text-align:center;

float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书";

background-image:url(images/noactive.jpg);}

a {width:154px; height:72px;}

a:link { text-decoration:none; color:#FFFF00;}

a:visited { text-decoration:none; color:#FFFF00; }

#navigation li:hover { color:#CC0000; text-decoration:underline;

background-image:url(images/active.jpg);}

a:hover{ color:#CC0033;}

#left {background-image:url(images/left.jpg); width:22px;}

/style

5、在加入CSS代码之间,网页此时的效果如图:

如何实现网页导航栏随着网页滚动下滑

1、首先输入下方的代码:

$(window).scroll(function () {

            var $nav = $(".floatingMenu ul li"),

              length = $nav.length-1,//获取导航菜单 ul li 的个数

              item = new Array(),//新建一个数组

              sTop = $(window).scrollTop();//获取偏移的高度

          for (var i = 0; i length; i++) {

2、然后输入下方的代码:

if (i == 0) {

                  item[i + 1] = $(".blockListdiv:first-child").offset().top;

                  if (sTop = item[i + 1]) {

                       $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");//选中的样式selected

                   }

               } else {

3、然后输入下方的代码:

item[i + 1] = $(".blockListdiv:nth-child(" + (i + 1) + ")").offset().top;

                   if (sTop = item[i + 1] - 100) {

                       $nav.eq(i).addClass("selected").siblings("li").removeClass("selected");

                  }

               }

           }

       })

4、然后就可以了。

如何用CSS和jQuery实现一个侧滑导航菜单

可以参考:

为了建立导航菜单,让我们先看看html结构:

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

titleAnimation Menu Demo/title

link rel="stylesheet" href=""

link href='' rel='stylesheet' type='text/css'

link rel="stylesheet" href=""

script src=""/script

script src="script.js"/script

link rel="stylesheet" href="style.css"

/head

body

!-- Content goes here --

/body

/html

首先,我们引用normalize.css作为默认样式,以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。

面板按钮

每个网站面板导航按钮都类似。它往往是一个图标字体,如fontawesome,但在本教程中我想添加一些动画,所以我们用横线来实现。基本上,我们的按钮是一个跨度,包含三个div显示为水平横线。

span class="d0a3-9c58-ec39-303a toggle-button"

div class="9c58-ec39-303a-3589 menu-bar menu-bar-top"/div

div class="ec39-303a-3589-9456 menu-bar menu-bar-middle"/div

div class="303a-3589-9456-b572 menu-bar menu-bar-bottom"/div

/span

样式看起来如下:

.toggle-button {

position: fixed;

width: 44px;

height: 40px;

padding: 4px;

transition: .25s;

z-index: 15;

}

.toggle-button:hover {

cursor: pointer;

}

.toggle-button .menu-bar {

position: absolute;

border-radius: 2px;

width: 80%;

transition: .5s;

}

.toggle-button .menu-bar-top {

border: 4px solid #555;

border-bottom: none;

top: 0;

}

.toggle-button .menu-bar-middle {

height: 4px;

background-color: #555;

margin-top: 7px;

margin-bottom: 7px;

top: 4px;

}

.toggle-button .menu-bar-bottom {

border: 4px solid #555;

border-top: none;

top: 22px;

}

.button-open .menu-bar-top {

transform: rotate(45deg) translate(8px, 8px);

transition: .5s;

}

.button-open .menu-bar-middle {

transform: translate(230px);

transition: .1s ease-in;

opacity: 0;

}

.button-open .menu-bar-bottom {

transform: rotate(-45deg) translate(8px, -7px);

transition: .5s;

}

按钮有一个固定的位置,不动时滚动页面。它也有一个 z-index :15的样式,以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式,我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时,我们添加一个类.button-open。我们引用jQuery,可以比较方便的实现它:

$(document).ready(function() {

var $toggleButton = $('.toggle-button');

$toggleButton.on('click', function() {

$(this).toggleClass('button-open');

});

});

初学者可能不熟悉jQuery,让我解释一下这是怎么回事。首先,我们初始化一个变量称为$togglebutton,其中包含我们的按钮。我们将它存储为一个变量,然后我们创建一个事件监视器监听点击按钮。每单击一次,事件监听器会执行方法 function toggleclass()来切换.button-open。

.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转45度,与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。

侧滑菜单

侧滑菜单的html的结构如下:

div class="3589-9456-b572-0bb7 menu-wrap"

div class="9456-b572-0bb7-1d43 menu-sidebar"

ul class="b572-0bb7-1d43-0872 menu"

lia href="#"Home/a/li

lia href="#"About/a/li

lia href="#"Blog/a/li

li class="0bb7-1d43-0872-17d1 menu-item-has-children"a href="#"Click The Arrow/a

span class="1d43-0872-17d1-b0e0 sidebar-menu-arrow"/span

ul class="0872-17d1-b0e0-8639 sub-menu"

lia href="#"Alignment/a/li

lia href="#"Markup/a/li

lia href="#"Comments/a/li

/ul

/li

lia href="#"Courses/a/li

lia href="#"Get In Touch/a/li

/ul

/div

/div

在这里不详细解释每个风格的菜单,我们看下.menu-wrap 的div。它的样式如下:

.menu-wrap {

background-color: #6968AB;

position: fixed;

top: 0;

height: 100%;

width: 280px;

margin-left: -280px;

font-size: 1em;

font-weight: 700;

overflow: auto;

transition: .25s;

z-index: 10;

}

它的位置是固定的,所以菜单一直在同一个地方滚动。高度设为100%。注意,左边距设置为负数,使这菜单从视图中消失。为了让它有一个出现的特效,我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下:

$(document).ready(function() {

var $toggleButton = $('.toggle-button'),

$menuWrap = $('.menu-wrap');

$toggleButton.on('click', function() {

$(this).toggleClass('button-open');

$menuWrap.toggleClass('menu-show');

});

});

我们增加一个变量$menuwrap其中包含菜单的所有项,并使用相同的事件来创建按钮。这个.menu-show的左边距为0,并增加了一些盒子阴影效果。

.menu-show {

margin-left: 0;

box-shadow: 4px 2px 15px 1px #B9ADAD;

}

子菜单和链接

你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时,链接后,有一个class .sidebar-menu-arrow。

li class="17d1-b0e0-8639-9a67 menu-item-has-children"a href="#"Click The Arrow/a

span class="de1b-4987-a9c1-9a65 sidebar-menu-arrow"/span

ul class="4987-a9c1-9a65-d0a3 sub-menu"

!-- List items --

/ul

/li

span 有一个::after伪元素包实现fontawesome箭头。默认情况下,子菜单是隐藏的,只有单击父级菜单时才出现:

$(document).ready(function() {

var $sidebarArrow = $('.sidebar-menu-arrow');

$sidebarArrow.click(function() {

$(this).next().slideToggle(300);

});

});

当我们单击箭头,一个函数被调用时,它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失,函数有一个动画时间参数。

最后,我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下:

.menu-sidebar li a::after {

content: "";

display: block;

height: 0.15em;

position: absolute;

top: 100%;

width: 102%;

left: 50%;

transform: translate(-50%);

background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);

transition: background-position .2s .1s ease-out;

background-size: 200% auto;

}

.menu-sidebar li a:hover::after {

background-position: -100% 0;

}

这个::after伪元素包含在每个环节下绝对定位的块级元素,随着0.15em高度和宽度。我们不只是应用背景颜色的线,我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度,我们可以通过指定的百分比,做了一个渐变的颜色变化。

.menu-sidebar li a::after {

background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);

}

这里一半的线是透明的,另一半是黄色的。通过背景大小200%的宽度,使透明部分占用的所有链接的宽度。

网页导航菜单栏制作

导航菜单的实现

首先定义导航外围容器的样式:

#left {

width: 178px;

}

现在外围容器我们只要简单的定义其宽度,并赋予left的id名。在left容器中,我们添加一个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul,通过CSS我们可以改变其外观和形式。HTML结构如下:

div id="navcontainer"

ul

li a href="#"Home /a /li

li a href="#"About me /a /li

li a href="#"ximicc /a /li

li a href="#"Articles /a /li

li a href="#"Photo roll /a /li

补充

/ul

/div

ul和li标签构建了一个简单的项目列表,其项目符号默认为小圆点,这是我们不需要的。利用CSS可以去掉那些小圆点,并用背景图片的形式替换以我们制作好的图标:

网页制作,慢慢下拉的菜单怎么做?

这个效果你可以通过2中途径实现,使用框架或者是使用JavaScript代码。

1.使用框架:查找框架中的二级菜单组建,如Bootstrap中的导航条中的二级菜单。下面的是一个二级下拉菜单的例子

nav class="a9c1-9a65-d0a3-9c58 navbar navbar-default"

    div class="9a65-d0a3-9c58-ec39 collapse navbar-collapse" id="bs-example-navbar-collapse-1"

      ul class="d0a3-9c58-ec39-303a nav navbar-nav"

        li class="9c58-ec39-303a-3589 active"a href="#"Link span class="ec39-303a-3589-9456 sr-only"(current)/span/a/li

        lia href="#"Link/a/li

        li class="303a-3589-9456-b572 dropdown"

          a href="#" class="3589-9456-b572-0bb7 dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"Dropdown span class="9456-b572-0bb7-1d43 caret"/span/a

          ul class="b572-0bb7-1d43-0872 dropdown-menu"

            lia href="#"Action/a/li

            lia href="#"Another action/a/li

            lia href="#"Something else here/a/li

            li role="separator" class="0bb7-1d43-0872-17d1 divider"/li

            lia href="#"Separated link/a/li

            li role="separator" class="1d43-0872-17d1-b0e0 divider"/li

            lia href="#"One more separated link/a/li

          /ul

        /li

      /ul

      

    /div!-- /.navbar-collapse --

  /div!-- /.container-fluid --

/nav

详细内容参见

2.使用JavaScript代码。使用jQuery的动画实现,如slideToggle()可使元素上下滑动,并且可以使用参数控制快慢。

script

//ID menu是点击的以及菜单,触发的是点击事件,当然可以换成hover事件,ID submenu是二级菜单层。

$("#menu").click(function(){

    $("#submenu").slideToggle();

});

/script

slideToggle()请参考

发表评论

评论列表

  • 闹旅命轴(2022-06-28 06:49:32)回复取消回复

    ()和rotate()功能使顶部和底部的横线旋转45度,与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。侧滑菜单侧滑菜单的html的结构如下:div class="9a65-d0a3-9c58-ec39 menu-wrap" div class="d0a3-9c58-ec39-303a menu-sidebar"

  • 鹿岛葵袖(2022-06-28 06:20:01)回复取消回复

    removeClass("selected");//选中的样式selected                    }                } else {3、然后输入下方的代

  • 晴枙拒梦(2022-06-28 12:12:30)回复取消回复

    oggleButton.on('click', function() { $(this).toggleClass('button-open'); });});初学者可能不熟悉jQuery,让我解释一下这是怎么回事。首先,我们初始化一个变量称为$tog