« »

Hiệu ứng tạo ra các trình đơn có cách thức hoạt động giống như các trình đơn trong HĐH Windows XP.

Nhãn: Menu XP

Demo
Phóng to
Tải lại
Cửa sổ mới

Tạo video bằng AI chỉ với giọng nói hoặc văn bản

Ứng dụng video AI MIỄN PHÍ hàng đầu của bạn! Tự động hóa video AI đầu tiên của bạn. Tạo Video Chuyên Nghiệp Của Bạn Trong 5 Phút Bằng AI Không Cần Thiết Bị Hoặc Kỹ Năng Chỉnh Sửa Video. Sản xuất video dễ dàng dành cho nhà tiếp thị nội dung. Ứng dụng video AI KHÔNG GIỚI HẠN miễn phí trong tay bạn

Mã nguồn
Files
CSS
JavaScript
HTML
In

Copy All x2

<style type="text/css">
.topItem {
  background: #6D929B;
  background-image: url(close.gif);
  background-position:right center;
  background-repeat:no-repeat;
  padding-left:3px;
  height:22px;
  cursor:pointer;
  text-decoration: none;
  color: #C1DAD6;
  font-weight:bold;
  font-family:"GOTHIC";
}

.topItemOver {
  padding-left:3px;
  background: #6D929B;
  background-image: url(open.gif);
  background-position:right center;
  background-repeat:no-repeat;
  height:22px;
  cursor:pointer;
  text-decoration: none;
  color: #C1DAD6;
  font-weight:bold;
  font-family:"GOTHIC";
}

.dropMenu {
  background:#B7AFA3;
  filter:alpha(opacity=100);
  border:1px solid #6D929B;
}

.subMenu {
  display:block;
}

.subItem {
  height:21px;
  padding-left:10px;
  cursor:pointer;
  font-weight:bold;
  text-decoration:none;
  color:#6D929B;
}

.subItem a {
  text-decoration:none;
  color:#6D929B;
}

.subItemOver {
  height:21px;
  padding-left:10px;
  cursor:pointer;
  font-weight:bold;
}

.subItemOver  a {
  color:#485C5A;
  text-decoration:none;
}

.drop {
  border-left:1px solid black;
  border-right:1px solid black;
}

.topItem1 {
  background: #3366CC;
  background-image: url(close.gif);
  background-position:right center;
  background-repeat:no-repeat;
  padding-left:3px;
  height:22px;
  cursor:pointer;
  text-decoration: none;
  color: #FFFFFF;
  font-weight:bold;
  font-family:"GOTHIC";
}

.topItem1Over {
  padding-left:3px;
  background: #3366CC;
  background-image: url(open.gif);
  background-position:right center;
  background-repeat:no-repeat;
  height:22px;
  cursor:pointer;
  text-decoration: none;
  color: #FFFFFF;
  font-weight:bold;
  font-family:"GOTHIC";
}

.dropMenu1 {
  background:#6699FF;
  filter:alpha(opacity=100);
  border:1px solid #3366CC;
}

.subMenu1 {
  display:block;
}
.subItem1 {
  height:21px;
  padding-left:10px;
  cursor:pointer;
  font-weight:bold;
  text-decoration:none;
  color:#FFFFFF;
}

.subItem1 a {
  text-decoration:none;
  color:#FFFFFF;
}

.subItem1Over {

  height:21px;
  padding-left:10px;
  cursor:pointer;
  font-weight:bold;
}

.subItem1Over  a {
  color:#003399;
  text-decoration:none;
}

.topItem2 {
  background: #84596B;
  background-image: url(close.gif);
  background-position:right center;
  background-repeat:no-repeat;
  padding-left:3px;
  height:22px;
  cursor:pointer;
  text-decoration: none;
  color: #FFFFFF;
  font-weight:bold;
  font-family:"GOTHIC";
}

.topItem2Over {
  padding-left:3px;
  background: #84596B;
  background-image: url(open.gif);
  background-position:right center;
  background-repeat:no-repeat;
  height:22px;
  cursor:pointer;
  text-decoration: none;
  color: #FFFFFF;
  font-weight:bold;
  font-family:"GOTHIC";
}

.dropMenu2 {
  background:#B58AA5;
  filter:alpha(opacity=100);
  border:1px solid #84596B;
}

.subMenu2 {
  display:block;
}

.subItem2 {
  height:21px;
  padding-left:10px;
  cursor:pointer;
  font-weight:bold;
  text-decoration:none;
  color:#CECFCE;
}

.subItem2 a {
  text-decoration:none;
  color:#CECFCE;
}

.subItem2Over {
  height:21px;
  padding-left:10px;
  cursor:pointer;
  font-weight:bold;
}

.subItem2Over  a {
  color:#FFFFFF;
  text-decoration:none;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="javascript">
// Created by: Eric Simmons :: http://www.jswitch.com

/************************************************************************
Author: Eric Simmons
Contact: info AT jswitch DOT com
Website: http://www.jswitch.com
Version: 2.0 12/2005

DISCLAIMER: THIS SOFTWARE IS PROVIDED "AS IS" AND WITHOUT ANY EXPRESS
OR IMPLIED WARRANTIES, JSWITCH.COM IS NOT RESPONSIBLE FOR ANY ADVERSE
AFFECTS TO YOUR COMPUTER OR SYSTEMS RUNNING THIS SCRIPT.

LICENSE: YOU ARE GRANTED THE RIGHT TO USE THE SCRIPT PERSONALLY OR
COMMERCIALLY. THE AUTHOR, WEBSITE LINKS AND LICENSE INFORMATION IN THE
HEADER OF THIS SCRIPT MUST NOT BE MODIFIED OR REMOVED. IF PORTIONS OF
THE CODE ARE TRANSFERED TO ANOTHER SCRIPT THE AUTHORS NAME AND CONTACT
INFORMATION MUST BE STATED IN THE NEW SCRIPT BY THE PORTIONS CODE THAT
HAVE BEEN TRANSFERED.

Notes:

If you want a menu to be open initially set the style display to
"inline" in the subMenu class div like this:
<div class="subMenu" style="display:inline;">

The fading effect can be disabled by setting the doFading var to
false.

***********************************************************************/

var menuObjArray = new Array();
menuObjArray[0] = new Array();
menuObjArray[1] = new Array();
menuObjArray[2] = new Array();
menuObjArray[3] = new Array();
menuObjArray[4] = new Array();
menuObjArray[5] = new Array();
menuObjArray[6] = new Array();
menuObjArray[7] = new Array();

var timerSlide = null;
var numMenuItem = 0;
var slideDelay = 15;
var divHeight = 21;
var moveSlidePix = 5;
var isLocked = false;
var doFading = true;

InitAll();

function InitAll() {
  var divs = document.getElementsByTagName("DIV");
  menuStateAry = GetUserCookie("xpMenuCookv2").split(",");

  aryNum = 0;
  for(dn=0; dn < divs.length;dn++) {
    if(String(divs.item(dn).className).substring(0,7) == "topItem") {
      mainMenuDiv = divs.item(dn).parentNode;
      menuContainerDiv= mainMenuDiv.getElementsByTagName("DIV").item(1);
      itemContainerDiv= menuContainerDiv.getElementsByTagName("DIV").item(0);
      if(menuStateAry != 0)
        itemContainerDiv.style.height = parseInt(menuStateAry[aryNum]) + "px";
      if(!doFading) {
        if (menuContainerDiv.filters)
          menuContainerDiv.filters.alpha.opacity = 100;
        else
          menuContainerDiv.opacity = 1;
      }
      if(menuStateAry != 0 ) {
        if( parseInt(menuStateAry[aryNum]) == 0)
          itemContainerDiv.style.display = 'none';
        else
          itemContainerDiv.style.display = 'inline';
      }
      Init(divs.item(dn));
      aryNum++;
    }
  }
}

function Init(objDiv) {
  if (isLocked)
    return;
  var mainMenuDiv, subMenuDiv, menuContainerDiv, itemContainerDiv,styleRules;
    for(r=0;r < document.styleSheets.length; r++) {
      if( -1 != String(document.styleSheets[r].href).indexOf("xpMenu.css") )
        break;
    }
    if(!document.styleSheets[r].rules)
      styleRules = document.styleSheets[r].cssRules;
    else
      styleRules = document.styleSheets[r].rules;

  numMenuItem = 0;
  mainMenuDiv = objDiv.parentNode;
  subMenuDiv =  mainMenuDiv.getElementsByTagName("DIV").item(0);

  menuContainerDiv= mainMenuDiv.getElementsByTagName("DIV").item(1);
  itemContainerDiv= menuContainerDiv.getElementsByTagName("DIV").item(0);

  aLen = menuObjArray[0].length;
  for (i=0 ;i < aLen ; i++) {
    if (menuObjArray[0][i] == menuContainerDiv) {
      break;
    }
  }

  if (i == aLen) {
    menuObjArray[0][i]  = menuContainerDiv;
    menuObjArray[1][i] = itemContainerDiv;
    menuObjArray[7][i] = subMenuDiv;
    subMenuDiv.onclick = SetSlide;
      lastmenuNum = -1;
    for (b=0;b<itemContainerDiv.childNodes.length;b++) {
      if (itemContainerDiv.childNodes.item(b).tagName == "SPAN") {
        numMenuItem ++;
        itemContainerDiv.childNodes.item(b).onmouseover= ChangeStyle;
        itemContainerDiv.childNodes.item(b).onmouseout= ChangeStyle;
        lastmenuNum = b;
      }
    }
      for(r=0;r < styleRules.length; r++) {
        tmpStr1 = String(styleRules[r].selectorText);
        tmpStr2 = String("." + itemContainerDiv.childNodes.item(lastmenuNum).className);
        if(tmpStr1 == tmpStr2) {
          if(NaN != parseInt(styleRules[r].style.height)) {
            divHeight = parseInt(styleRules[r].style.height);
            break;
          }
        }
      }

    menuObjArray[2][i] = numMenuItem;
    menuObjArray[3][i] = mainMenuDiv;

    if (itemContainerDiv.style.display == "inline") {
      menuObjArray[4][i] = numMenuItem * divHeight;
      menuObjArray[0][i].style.height = numMenuItem * divHeight + "px";
      menuObjArray[6][i] = true;
      if(doFading) {
         if (menuObjArray[0][i].filters)
           menuObjArray[0][i].filters.alpha.opacity = 100;
         else
           menuObjArray[0][i].style.opacity = 1;
       }
      } else {
        menuObjArray[7][i].className = menuObjArray[7][i].className+"Over";
        menuObjArray[4][i] = 0;
        menuObjArray[0][i].style.height = 0 + "px";
        menuObjArray[6][i] = false;
        if(doFading) {
          if (menuObjArray[0][i].filters)
            menuObjArray[0][i].filters.alpha.opacity = 0;
          else
            menuObjArray[0][i].style.opacity = .0;
      }
    }

  }//end if

  mainMenuDiv = null;
  subMenuDiv =  null;
  menuContainerDiv= null;
  itemContainerDiv= null;
}

function SetSlide() {
  if (isLocked)
    return;
  else
    isLocked = true;
  for (i=0 ;i < menuObjArray[0].length; i++) {
    if (menuObjArray[3][i] == this.parentNode) {
      if (menuObjArray[5][i] == null)
        menuObjArray[5][i] = setInterval("RunSlide(" + i + ")", slideDelay);
      break;
    }
  }
}



function UpdateUserCookie(aryIndex) {
  date = new Date();
  date.setTime(date.getTime() + (1000 * 60 * 60 * 24 * 30));
  document.cookie = "xpMenuCookv2" + "=" + escape(menuObjArray[4].toString()) + "; expires=" + date.toGMTString();
}

function GetUserCookie(crumbName) {
  colCookie = document.cookie.split("; ");
  for (a=0; a < colCookie.length; a++) {
      colCrumb = colCookie[a].split("=");
      if(colCrumb[0] == crumbName)
          return unescape(colCrumb[1]);
  }
  return "";
}


function RunSlide(objIndex) {
  if (menuObjArray[6][objIndex]) {
    if(doFading) {
      if(menuObjArray[0][objIndex].filters)
        menuObjArray[0][objIndex].filters.alpha.opacity -= 100/ ( ( (menuObjArray[2][i] * divHeight) / moveSlidePix) +1);
      else
        menuObjArray[0][objIndex].style.opacity -= .9/(((menuObjArray[2][i] * divHeight) / moveSlidePix)+1);
    }
    menuObjArray[1][objIndex].style.display = 'none';
    menuObjArray[4][objIndex] -=  moveSlidePix;
    if (menuObjArray[4][objIndex] > 0)
      menuObjArray[0][objIndex].style.height = menuObjArray[4][i] + "px";
    else {
        if(doFading) {
          if(menuObjArray[0][objIndex].filters)
            menuObjArray[0][objIndex].filters.alpha.opacity = 0;
          else
            menuObjArray[0][objIndex].style.opacity = 0;
          }
        menuObjArray[7][objIndex].className = menuObjArray[7][objIndex].className+"Over";
        menuObjArray[4][objIndex] = 0;
        menuObjArray[0][objIndex].style.height = 0 + "px";
        clearInterval(menuObjArray[5][objIndex]);
        menuObjArray[5][objIndex] = null;
        menuObjArray[6][objIndex] = false;
        isLocked = false;
        UpdateUserCookie(objIndex);
        return 0;
    }
    return 0;
  }
  if (!menuObjArray[6][objIndex]) {
    if(doFading) {
      if(menuObjArray[0][objIndex].filters)
        menuObjArray[0][objIndex].filters.alpha.opacity += 100/ ( ( (menuObjArray[2][i] * divHeight) / moveSlidePix) +1);
      else {
        opcVal = parseFloat(menuObjArray[0][objIndex].style.opacity);
        opcVal += .9/((menuObjArray[2][i] * divHeight) / moveSlidePix);
        menuObjArray[0][objIndex].style.opacity = opcVal;
      }
    }
      menuObjArray[4][objIndex] +=  moveSlidePix;
      if (menuObjArray[4][objIndex] < (menuObjArray[2][objIndex] * divHeight))
        menuObjArray[0][objIndex].style.height = menuObjArray[4][i] + "px";
      else {
        if(doFading) {
          if(menuObjArray[0][objIndex].filters)
            menuObjArray[0][objIndex].filters.alpha.opacity = 100;
          else
            menuObjArray[0][objIndex].style.opacity = 1;
        }
        strClassName = String(menuObjArray[7][objIndex].className);
        menuObjArray[7][objIndex].className = strClassName.substring(0,strClassName.length - 4);
        menuObjArray[4][objIndex] = (menuObjArray[2][objIndex] * divHeight);
        menuObjArray[0][objIndex].style.height = (menuObjArray[2][objIndex] * divHeight)+ "px";
        menuObjArray[1][objIndex].style.display = 'inline';
        clearInterval(menuObjArray[5][objIndex]);
        menuObjArray[5][objIndex] = null;
        menuObjArray[6][objIndex] = true;
        isLocked = false;
        UpdateUserCookie(objIndex);
        return 0;
      }
    return 0;
  }
}

function ChangeStyle() {
  className = String(this.className);
  if (className.substring(className.length - 4, className.length) == "Over")
    this.className = className.substring(0,className.length - 4);
  else
    this.className = this.className + "Over";
}

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div style="float:left;width:140px;height:500px;margin-right:10px;" >
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv">
<div class="topItem1">Demo Menu 1</div>
<div class="dropMenu1">
  <div class="subMenu1" style="display:inline;">
    <span class="subItem1"><a href="#">Sub Menu 1</a></span><br>

    <span class="subItem1"><a href="#">Sub Menu 2</a></span><br>
    <span class="subItem1"><a href="#">Sub Menu 3</a></span><br>
    <span class="subItem1"><a href="#">Sub Menu 4</a></span><br>
    <span class="subItem1"><a href="#">Sub Menu 5</a></span><br>
  </div>
</div>
</div>
<!-- *********************************End Menu****************************** -->

<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv">
<div class="topItem">Demo Menu 2</div>
<div class="dropMenu" style="height:0px;filter:alpha(opacity=0);opacity:0">
  <div class="subMenu" style="display:none;">
    <span class="subItem"><a href="#">Sub Menu 1</a></span><br>
    <span class="subItem"><a href="#">Sub Menu 2</a></span><br>
    <span class="subItem"><a href="#">Sub Menu 3</a></span><br>

    <span class="subItem"><a href="#">Sub Menu 4</a></span><br>
  </div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv">
<div class="topItem2">Demo Menu 3</div>
<div class="dropMenu2"style="">
  <div class="subMenu2" style="display:inline;">
    <span class="subItem2"><a href="#">Sub Menu 1</a></span><br>

    <span class="subItem2"><a href="#">Sub Menu 2</a></span><br>
    <span class="subItem2"><a href="#">Sub Menu 3</a></span><br>
    <span class="subItem2"><a href="#">Sub Menu 4</a></span><br>
  </div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Lời bình (0)
Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

30/01/2007
Eric Simmons [more]
3,930
0
3
0
16.42 KBytes

JavaScript Menu XP - Ngôn ngữ: tiếng Việt

2.7/5 3 lượt đánh giá / 3,930 lượt xem / 0 lời bình 30/01/2007 Hiệu ứng tạo ra các trình đơn có cách thức hoạt động giống như cá...JavaScript Menu XP - Menu XP - Ngôn ngữ: tiếng Việt

Hãy là thành viên đầu tiên làm điều này

tuyenhd

vuphuonganh freebasex tuyenhd nhthai quan0909