javascript_javascript 스킬로 슬라이딩 메뉴 효과를 구현하는 간단한 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

javascript_javascript 스킬로 슬라이딩 메뉴 효과를 구현하는 간단한 방법

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

javascript슬라이딩 메뉴

본 글의 예시에서는 자바스크립트를 이용하여 슬라이딩 메뉴 효과를 간단하게 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

전체 자바스크립트 코드는 총 42줄인데 그 중 주요 기능인 슬라이드 코드가 26줄인데 개선이 가능합니다!

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>滑动菜单</title>
<style>
a,body,div,h1,h2,li,ul{
  margin:0;
  padding:0
}
a{display:block;text-decoration:none;height:25px;color:#456;background-color:#ABC;cursor:pointer;}
a:hover{color:#123;background-color:#789;font-weight:bold;}
body{
  font:12px/18px "Times New Roman",Times,"宋体",serif;
  text-align:center;
}
h1{
  height:100px;
  width:25px;
  position:absolute;
  top:-1px;
  left:123px;
  cursor:pointer;
  color:#89A;
  font-size:18px; 
  line-height:50px;
  background-color:#234;
}
h2{
  height:24px;
  font-size:12px;
  border-bottom:1px solid #4C6CB9;
  color:#BBB;
  font-weight:600;
  cursor:pointer;
}
li{height:25px;list-style:none}
#Container{width:800px;background-color:#DDD;border: 1px solid #999;margin:10px auto}
#Top{height:30px;background-color:#DDD;border: 1px solid #999;}
#Logo{height:100px;background-color:#DDD;border: 1px solid #999;}
#Nav{height:30px;background-color:#DDD;border: 1px solid #999;}
#SideBar{
  position:fixed!important;
  position:absolute;
  top:200px;
  left:0px;
}
#SideBar a,#SideBar h2,#SideBar li,#SideBar ul{width:120px}
#Main{height:800px;background-color:#DDD;border: 1px solid #999;}
#Footer{height:60px;background-color:#DDD;border: 1px solid #999;}
.Extracted{width:0px;}
.Extrended{border:1px solid #555;background-color:#000;padding:1px}
</style>
</head>
<body>
<div id="Container">
  <div id="Top">顶条</div>
  <div id="Logo">Logo</div>
  <div id="Nav">导航条</div>
  <div id="SideBar" class="Extrended">
    <h1 id="菜单">菜单</h1>
    <ul>
      <h2 id="功能栏">功能栏1</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2 id="功能栏">功能栏2</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2 id="功能栏">功能栏3</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2 id="功能栏">功能栏4</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2 id="功能栏">功能栏5</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
    <ul>
      <h2 id="功能栏">功能栏6</h2>
      <li><a href="">功能1</a></li>
      <li><a href="">功能2</a></li>
      <li><a href="">功能3</a></li>
      <li><a href="">功能4</a></li>
      <li><a href="">功能5</a></li>
    </ul>
  </div>
  <div id="Main">内容区</div>
  <div id="Footer">底条</div>
</div>
<script type="text/javascript">
function $(e){return document.getElementById(e)}
function Slide(Element,Mod){
  var LongthMax,LongthMin,Property,Count=25,Accum,ID,Dlt,DltDlt;
  if(Mod){
    Property='left';
    LongthMax=0;
    LongthMin=-124;
  }
  else{
    Property='height';
    LongthMax=Element.children.length*25;
    LongthMin=25;
  }
  DltDlt=(LongthMax-LongthMin)/(Count*5);
  if(Element.style[Property]==LongthMax+'px')DltDlt=-DltDlt;
  Accum=parseInt(Element.style[Property]);
  Dlt=7*DltDlt;
  ID=setInterval(function(){
    if(Count--){
      if(!(Count%5))Dlt-=DltDlt;
      Accum+=Dlt;
      Element.style[Property]=Math.floor(Accum)+'px';
      return
    }
    clearInterval(ID);
    Element.style[Property]=(DltDlt>0)&#63; LongthMax+'px':LongthMin+'px';
  },20);
}
$('SideBar').style.left='0px';
$('SideBar').children[0].onclick=function(){
  Slide(this.parentNode,1);
};
(function(Menu,i,tmp){
  Menu=document.getElementsByTagName('ul');
  for(i=Menu.length;i--;){
    tmp=Menu[i];
    tmp.style.overflow='hidden';
    tmp.style.height='25px';
    tmp.children[0].onclick=function(){
      Slide(this.parentNode,0);
    };
  }
}());
</script>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

See all articles

핫 AI 도구

뜨거운 도구

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는