网页制作学习4----博客前端之下拉菜单

最新推荐文章于 2024-04-24 09:22:16 发布

Pitter_Patter_Bee

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量641

点赞数

分类专栏：网页制作文章标签： javascript html

网页制作专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果：鼠标放上去会出现一个下拉的菜单。

首先文件有index.css,index.js,index.html base.js 先把界面做出来。

1、在index.html里面添加

<body>

</div>

</body>

效果如下：

2、然后我们的css先这么写：
body{
margin:0; //记住要写分号，不然出不来效果，我试过
padding:0; //内外边距先设为0。
background:url(images/header_bg.png) repeat-x; //加了一个往x轴展开的背景
front-size:12px;
color:#333；
}

就变成这样了：

我做了一个实验，发现那个背景图片repeat-x 就是不断复制展开的

然后是
#header{
Width:900px;
Height:30px;
Margin:0 auto; //margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right, 0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
}
#header.log{/ /log这个图片
Width:100px;
Height:30px;
Float:left;
}
#header.logo img{ //图片本身是内联块
Display:block;
}
#header.member{
Width:70px;
Height:30px;
Line-height:30px;
Float:right; //右对齐
//Background:red url(images/arrow.png)no-repeat right center;//可以先加个背景颜色看它到底在哪里
这里可能那个右箭头不是很好控制位置，还可以用像素来调。
Background: url(images/arrow.png)no-repeat 55px center; //从左边向右边移55个像素。
Cursor:pointer; //加一个手型，这样它放上去就是个手

}

3、接下来回到index.html继续编辑那个下拉菜单。

<div class="member">个人中心

<ul>

</ul>

</div>

然后看一下，它会非常乱，然后要回到css里面去调试一下。
Ul{
Padding:0; //把它的行内边距全部去掉
Margin:0;
}
Ul li{
List-style-type:none; //把小圆点去掉

}
#header ul{
Position:absolute; //绝对定位
Top:30px;
Left:500px;
}

然后效果就是在中间的那里：

然后就继续编辑#header ul

#header ul{

Position:absolute ;//绝对定位
Top:30px;
Left:500px;
Background:#FBF7E1;
Width:100px; //就是弄一个区域
Height:120px;
Border:1px solid #999; //就是给它弄一个边框
Border-top:none; //上面不用边框
Padding:10px 0 0 0; //这样整体就会下来一点

}

padding:10px 5px 15px 20px;

上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

效果：

然后我们就要来处理一下那个字了，往css里面继续添加规则
#header ul li{
Height:25px;
Line-height:25px;
Text-indent:20px;
Letter-spacing:1px; //把字再分一下
}

这样的绝对定位会有问题的，如果说把窗口缩小的话，这个ul整个框就会偏移一些。
下面给这些字做上超链接：
<li><a href=”###”>设置</a></li>
然后再给a写一下css规则
#header ul li a{
Display:block; //保障和上面一样大
Text-decoration:none; //没有下划线
Color:#333; //字体颜色
Background:url(images.arrow3.gif) no-repeat 5px 45%; //只显示一个图片
}
而且我要它鼠标放上去字体颜色要变：
#header ul li a:hover{
Background:#fc0 url(images.arrow4.gif) no-repeat 5px 45%; //换成那个黑色的图片
}

效果如下：

然后这个下拉菜单我们是需要先隐藏的：加上一句display:none;
#header ul{
Position:absolute; //绝对定位
Top:30px;
Left:500px;
Background:#FBF7E1;
Width:100px; //就是弄一个区域
Height:120px;
Border:1px solid #999; //就是给它弄一个边框
Border-top:none; //上面不用边框
Padding:10px 0 0 0; 这样整体就会下来一点
display:none;

}

如果我的鼠标放在个人中心那个位置的时候它就要显现：
那么现在就要转移到index.js里面了
Window.οnlοad=function(){
$().getClass(‘member’).hover(function(){alert(‘show’);},function(){alert(‘hide’);}){
}
}
但是这时候hover方法不存在，所以要转移到base.js里面设置。
Base.prototype.hover=function(over,out)
{
For(var i0;i<this.elements.length;i++)
{this.elements[i].οnmοuseοver=over;
This.elements[i].οnmοuseοut=out;}
Return this;
};
这个时候你就会发现你鼠标一放上去就会跳出show，回车以后离开会跳出Hide.这样就成功了，其实,所以接下来我要改之前传进去的那个over和out。
Window.οnlοad=function(){
$().getClass(‘’member).hover(function(){
$().getTagName(‘ul’).show(); //这个就是获取到ul对象
},function(){$().getTagName(‘ul’).hide();}
}
所以要再写show和hide方法。
Base.prototype.show=function(){
For(var i=0;i<this.elements.length;i++)
{this.elements[i].style.display=’block’;}
Return this;
}
Base.prototype.hide=function(){
For(var i=0;i<this.elements.length;i++)
{this.elements[i].style.display=’none’;}
Return this;
}
然后就成功了啦，但是你会发现，我们本来放在上面横向应该是可以离开的没错，但是纵向移下来的时候应该要可以保留才对。

因为我们之前只是，选择了那个div member对象，它的区域本来就是我的中心那么大而已。所以我们要想本来写的<ul></ul>放到<div class=”member”>个人中心<ul><li></li></ul></div>里面去，这样就可以了。

4、现在剩最后一个小点，鼠标放上去变成一个小图片向上的小三角，拿走又变成另一个小三角图片向下的小三角。
$().getClass(‘member’).css(‘background’,url(images/arrow2.png)no-repeat 55px ceter);放进那个第一个传的函数里面，和show并存。
老师为了让它不那么麻烦，可以写成
$(this).css('background', 'url(images/arrow2.png) no-repeat 55px center');

$().getTagName('ul').show();

又改装了一下前面的base代码:
var $ = function (_this) {
return new Base(_this);
}

function Base(_this) {
this.elements = [];
if (_this != undefined) { //_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的'undefined'
this.elements[0] = _this;
}

}

这里附上base.js的代码：

//前台调用
var $ = function (_this) {
return new Base(_this);
}

//基础库
function Base(_this) {
//创建一个数组，来保存获取的节点和节点数组
this.elements = [];
if (_this != undefined) { //_this是一个对象，undefined也是一个对象，区别与typeof返回的带单引号的'undefined'
this.elements[0] = _this;
}
}

//获取ID节点
Base.prototype.getId = function (id) {
this.elements.push(document.getElementById(id));
return this;
};

//获取元素节点数组
Base.prototype.getTagName = function (tag) {
var tags = document.getElementsByTagName(tag);
for (var i = 0; i < tags.length; i ++) {
this.elements.push(tags[i]);
}
return this;
};

//获取CLASS节点数组
Base.prototype.getClass = function (className, idName) {
var node = null;
if (arguments.length == 2) {
node = document.getElementById(idName);
} else {
node = document;
}
var all = node.getElementsByTagName('*');
for (var i = 0; i < all.length; i ++) {
if (all[i].className == className) {
this.elements.push(all[i]);
}
}
return this;
}

//获取某一个节点
Base.prototype.getElement = function (num) {
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
};

//设置CSS
Base.prototype.css = function (attr, value) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 1) {
if (typeof window.getComputedStyle != 'undefined') {//W3C
return window.getComputedStyle(this.elements[i], null)[attr];
} else if (typeof this.elements[i].currentStyle != 'undeinfed') {//IE
return this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
}

//添加Class
Base.prototype.addClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (!this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))) {
this.elements[i].className += ' ' + className;
}
}
return this;
}

//移除Class
Base.prototype.removeClass = function (className) {
for (var i = 0; i < this.elements.length; i ++) {
if (this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))) {
this.elements[i].className = this.elements[i].className.replace(new RegExp('(\\s|^)' +className +'(\\s|$)'), ' ');
}
}
return this;
}

//添加link或style的CSS规则
Base.prototype.addRule = function (num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.insertRule != 'undefined') {//W3C
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') {//IE
sheet.addRule(selectorText, cssText, position);
}
return this;
}

//移除link或style的CSS规则
Base.prototype.removeRule = function (num, index) {
var sheet = document.styleSheets[num];
if (typeof sheet.deleteRule != 'undefined') {//W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') {//IE
sheet.removeRule(index);
}
return this;
}

//设置innerHTML
Base.prototype.html = function (str) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 0) {
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this;
}

//设置鼠标移入移出方法
Base.prototype.hover = function (over, out) {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].onmouseover = over;
this.elements[i].onmouseout = out;
}
return this;
};

//设置显示
Base.prototype.show = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'block';
}
return this;
}

//设置隐藏
Base.prototype.hide = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
}
return this;
}

Pitter_Patter_Bee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页制作学习4----博客前端之下拉菜单

效果：鼠标放上去会出现一个下拉的菜单。首先文件有index.css,index.js,index.html base.js 先把界面做出来。1、在index.html里面添加个人中心效果如下： 2、然后我们的css先这么写：body{margin:0; //记住要写分号，不然出不来效果，我试过padding:0; //内外
复制链接

扫一扫