动画导航栏代码（首页导航栏代码）

本篇文章给大家谈谈动画导航栏代码，以及首页导航栏代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、导航栏怎么设置
• 2、JS或Jquery动态改变导航栏样式
• 3、怎么用dreamweaver制作导航栏
• 4、请问怎样做导航栏的下拉菜单？

导航栏怎么设置

恕我无能为力 这是网络编程学里面的技术

大家最喜欢的黑色;javascript:window.top.space_addItem(13,7809,197,300,27,310,0);

然后是比较流行的蓝色:javascript:window.top.space_addItem(13,25540,101,281,25,600,20);

还有MM最爱的纯洁白色:javascript:window.top.space_addItem(13,1,781,149,100,500,0);

用法：进入空间，点击装扮空间，然后复制以上一款你喜欢的代码，然后黏贴在QQ空间的网址栏里面，回车，保存即可。

其它相关代码请进这个网站：

JS或Jquery动态改变导航栏样式

简单的插件代码如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

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

title动态导航插件/title

style type="text/css"

!--

body, td, th {

font-size: 14px;

background-color:#FFF

}

h1{border-bottom:1px solid #999; margin:50px 60px;}

/*导航默认样式，可根据实际情况修改*/

* {

margin:0;

padding:0

}

.nav {

width:980px;

height:30px;

left:50%;

margin-left:-490px;

list-style:none;

position:relative;

}

.nav li {

display:inline-block;

margin:0 3px;

position:relative;

overflow:hidden;

height:30px; /*建议此高度大于等于里面的a标签高度*/

float:left;

}

.nav li span {

display:inline-block;

overflow:hidden

}

.nav li a {

text-decoration:none;

outline:none;

color:#666;

display:inline-block;

padding:0 10px;

text-align:center;

background-color: #E1E1E1;

font-weight:bold;

height:30px;

line-height:30px;

}

/*鼠标经过时样式*/

.nav li a.over {

background-color:#666;

color:#FFF

}

--

/style

script type=text/javascript src=""/script

script type="text/javascript"

(function($){

$.fn.dynamicNav=function(options){

//默认配置

var defaults = {

direction:"up", //动画切换方向，总共4种up 、down 、left 、right

duration:100 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

};

// 覆盖默认配置

var opts = $.extend(defaults, options);

this.each(function(){

var navList=$(this).find("li"),

navLink=navList.find("a");

//在a标签外侧插入span

navList.wrapInner("span/span");

var span=navLink.parent();

//判断是否垂直切换

if(opts.direction=="up" || opts.direction=="down"){

var v=true;

}

//判断是否改变span初始位置及a样式

if(opts.direction=="right" || opts.direction=="down"){

var restSpan=true;

}

navLink.each(function(){

//获取a高度和宽度

var w=$(this).outerWidth(),

p=$(this).parent();

//初始复制现有a标签

$(this).clone().appendTo(p).addClass("over");

//如果是垂直切换

if(v){

p.css("width",w);

}else{

p.css("width",2*w).parent().css("width",w);

}

});

//如果向右或向下切换，改变span初始位置及a样式

if(restSpan){

span.each(function(){

if(opts.direction=="right"){

$(this).css({"margin-left":-$(this).outerWidth()/2});

}

if(opts.direction=="down"){

$(this).css({"margin-top" : -$(this).outerHeight()/2});

}

$(this)

.find('a')

.last()

.removeClass("over")

.prev()

.addClass("over");

});

}

//鼠标经过时动画函数

function over(o){

o.animate(v?{"margin-top": -o.outerHeight()/2}:{"margin-left": -o.outerWidth()/2}, opts.duration);

}

//鼠标移开时动画函数

function out(o){

o.animate(v?{"margin-top":0}:{"margin-left": 0}, opts.duration);

}

//鼠标经过和离开

span.hover(function(){

restSpan ? out($(this)) : over($(this));

},function(){

restSpan ? over($(this)) : out($(this));

});

});

};

})(jQuery);

$(function(){

//向左

$("#nav1").dynamicNav({

direction:"left", //动画切换方向，总共4种up 、down 、left 、right

duration:300 //三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

});

//向右

$("#nav2").dynamicNav({

direction:"right",

duration:200

});

//向上

$("#nav3").dynamicNav({

direction:"up",

duration:100

});

//向下

$("#nav4").dynamicNav({

direction:"down",

duration:400

});

});

/script

/head

body

h1向左（速度300毫秒）/h1

ul class="nav" id="nav1"

lia href=""首页/a/li

lia href=""前端技术/a/li

lia href=""视觉设计/a/li

lia href=""文章归档/a/li

lia href=""工具/书籍/a/li

lia href=""关于我/a/li

/ul

h1向右（速度200毫秒）/h1

ul class="nav" id="nav2"

lia href=""首页/a/li

lia href=""前端技术/a/li

lia href=""视觉设计/a/li

lia href=""文章归档/a/li

lia href=""工具/书籍/a/li

lia href=""关于我/a/li

/ul

h1向上（速度100毫秒）/h1

ul class="nav" id="nav3"

lia href=""首页/a/li

lia href=""前端技术/a/li

lia href=""视觉设计/a/li

lia href=""文章归档/a/li

lia href=""工具/书籍/a/li

lia href=""关于我/a/li

/ul

h1向下（速度400毫秒）/h1

ul class="nav" id="nav4"

lia href=""首页/a/li

lia href=""前端技术/a/li

lia href=""视觉设计/a/li

lia href=""文章归档/a/li

lia href=""工具/书籍/a/li

lia href=""关于我/a/li

/ul

/body

/html

怎么用dreamweaver制作导航栏

1.首先创建一个1x6的表格，参数为：border=0 cellspacing=3 cellpadding=0；

2.在这个表格的每个单元格内分别插入一个表格，宽度和高度设为100%；

3.建立一个CSS样式.up和.down；代码如下：

style

.up{

border:4 outset royalblue;color:yellow;background:blue;cursor:hand

}

.down{

border:4 inset royalblue;color:#33ff33;background:blue;cursor:hand

}

/style

4.对插入的表格调用样式和行为，代码如下：

class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onclick=window.open("button.htm","_blank") 。

请问怎样做导航栏的下拉菜单？

一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下：

div class="nav"这里是导航所在的DIV容器。/div

CSS代码：

.nav{

position:fixed; /* 绝对定位，fixed是相对于浏览器窗口定位。 */

top:0; /* 距离窗口顶部距离 */

left:0; /* 距离窗口左边的距离 */

width:100%; /* 宽度设置为100% */

height:40px; /* 高度 */

z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */

}

设置方式，原理及大致内容请看css代码注释。

动画导航栏代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于首页导航栏代码、动画导航栏代码的信息别忘了在本站进行查找喔。