JS制作导航栏CSS样式,css样式网页导航条

如何用JS或CSS制作网站导航条

下载硕思网页菜单，有中文破解版得，全图文傻瓜操作，自动生成js代码，你只要把代码放入网页中就行了

站在用户的角度思考问题，与客户深入沟通，找到翼城网站设计与翼城网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广、域名注册、虚拟空间、企业邮箱。业务覆盖翼城地区。

笔记：JS设置CSS样式的几种方式

1、直接更改，比如：

xID.style.display = "block"; // 更改display属性，会覆盖css中的定义。

xID.style.display = ""; // 取消js更改display属性，以css样式为准。

这里的xID，是通过id获取的标签。当然，也可能是通过tagName之类的获取的标签。

这种方式，简单直接。但是要修改大量的样式的时候，不适合。所以，我更推荐第二种方式。

2、更改类名

xID.className = "xx yy";

如果有多个类，就用空格隔开。前提，在样式中要有已有类的定义。比如这里的xx和yy类，在css中应该是写好的。

这种方式把所有的样式写在了css文件中，适合更改较多的样式以及炫酷的样式。js就只做一件事情：改类。至于这个类会把标签变成什么样子，交给css吧。

通过jquery也可以达到如上的效果：

$("#xID").css({

fontSize:"12px",

display:"block"

}); // 直接更改样式

$("#xID").addClass("xx"); // 增加删除类

$("#xID").removeClass("xx");

CSS样式制作导航条的步骤

一、定义一个盒子（“menu”）,用来装这个导航的。

二、用无序列表（ul）中的列（li）放导航的内容。

三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。

四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）

!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"

#menu{

width:500px;

margin:0 auto; /*令盒子居中*/

font-size:20px; /*定义字体的大小*/

}

ul{

margin:0; padding:0; /*把浏览器默认的间隔去掉*/

list-style:none; /*把前面的序列号去掉*/

}

li{

float:left; /*向左浮动，这个是实现水平的重要步骤！！*/

padding:0 15px; /*li里面的字体和边框的距离*/

}

text-decoration:none; /*去掉超链接的下划线*/

color:#333; /*超链接的字体颜色*/

}

a:hover{

color:#696;

}

/style

/head

body

div id="menu"

lia href="#"菜单1/a/li

/ul

/div

/body

/html

用js制作导航的当前栏目css样式，为什么设置不成功呢？

这是当然的，页面都跳转了，样式肯定不可能自动转到刷新后的页面啦，否则的话如果我的网站通过链接跳转到百度的页面，而刚好我网站的样式与百度的重叠，那么页面就会乱糟糟了。

而前面那两个链接并没有刷新页面，还是在当前页面，肯定就有效果啦。

你应该给每个页面指定一个编号，这样在页面加载时再把对应的导航菜单叠加上active类，比如第3个页面可以这样：

var pageId=2; //2是第三个页面（从0起算）;

$(function(){

$(".nav a").removeClass("active"); //如果每个菜单默认是没有active类的，此行可省略

$(".nav a").eq(pageId).addClass("active");

});

当然，也可以根据当前页面的文件名或其他信息来决定让哪个菜单项为当前项。总之，你不要指望在当前页面去直接控制跳转后的页面样式。

如何用JS做固定在网页中的导航条

使元素固定在网页中，不需要用到JS的，只需要用到CSS样式就可以了。

使用css 中的 position:fixed; fixed是相对于浏览器的定位，设置了这个样式的元素将不会随页面滚动而改变位置，固定在屏幕中。

如：

.classname {

position:fixed;

left:0;

top:0;

z-index:9999;

}

html css js导航点击菜单后自动改变背景颜色

1、建立一个静态页命名为change.html ，标题为js导航点击的怎么同时变图片跟字体颜色。

2、设置一个简易的导航栏。

3、加css 控制菜单的样式，并加入背景图片。

4、为li添加id，创建函数fun ，并传递传递参数。

5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)";

6、加入改变文字大小的代码

element.style.color="black";

//修改文字大小

element.style.fontSize="18px";

7、然后就完成了。

名称栏目：JS制作导航栏CSS样式,css样式网页导航条
分享URL：http://scyanting.com/article/dssjesh.html