search

Home >Web Front-end >JS Tutorial >Javascript imitation game website special effects mouse hover to display submenu

Javascript imitation game website special effects mouse hover to display submenu

巴扎黑
巴扎黑Original
2017-08-22 11:30:031449browse

This article describes the example of Javascript imitating the Sina game channel mouse hover display submenu effect, and shares it with everyone for your reference. The details are as follows:

Here is a demonstration of the web page column classification menu implemented using JS. It was taken from the Sina Game Channel. The operation method is similar to the effect of a sliding door. There is no need to click the mouse, just put the mouse on the first level main page. On the menu, a second-level classification menu can be displayed. The second-level menu that pops up is actually re-categorized. It can be said that overall, this is a website menu that supports three-level classification. Currently, Sina Games still The effect of using it.

Let’s take a look at the screenshot of the running effect:

Javascript imitation game website special effects mouse hover to display submenu

The specific code is as follows: 

<!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>
<title>js仿新浪游戏频道导航条</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:14px "微软雅黑", arial, serif;color:#333;}
a,a:link,a:visited{color:#039;}
img{border:0;}
.header_bg{width:100%;height:128px;background:url(images/header.jpg) no-repeat center top;}
.header{margin:0 auto 0 auto;width:988px;height:128px;background:url(images/header_z.jpg) no-repeat center top;}
.nav{position:relative;left:4px;top:92px;width:950px;height:35px;background:#333;border-top:1px solid #444;}
.nav .list{list-style-type:none;margin-left:15px;}
.nav .list li{float:left;position:relative;height:35px;line-height:26px;}
.nav .list li .game_hover{float:left;display:block;margin-top:5px;height:30px;padding:0 10px 0 10px;color:#ccc;font-weight:bold;text-decoration:none;}
.nav .list li .game_hover_current,
.nav .list li .game_hover:hover{background-color:#fff;color:#575757;margin-top:4px;padding:0 9px 0 9px;border:1px solid #666;border-bottom:0;}
.hover_cont{display:none;position:absolute;width:auto;height:auto; top:35px;border:1px solid #666;border-top:0;border-bottom-width:2px;background:#fff;z-index:1000;}
.hover_cont .nav_cont{padding:15px;padding-bottom:0;}
.hover_cont .nav_li{display:inline-block;width:100%;height:100%;*height:auto;*margin-top:7px;padding-bottom:5px;*padding-bottom:12px;border-bottom:1px dashed #ccc;}
.hover_cont .nav_li_l{float:left;width:80px;color:#f60;font-weight:bold;}
.hover_cont .nav_li_r{float:left;color:#999;font-family:"宋体";font-size:10px;line-height:26px;}
.hover_cont .nav_li_r a{padding:0 1px 0 1px;color:#666;font-size:12px;text-decoration:none;}
.hover_cont .nav_li_r a:hover{color:red;}
.hover_cont .nav_li_r a.orange{color:#f60;}
.nav .list .wlyx{width:720px;left:0;}
.nav .list .djdj{width:800px;left:0;}
.nav .list .yy{width:740px;left:0;}
.nav .list .dwsy{width:750px;left:0;}
.nav .list .xsk{width:740px;left:0;}
.nav .list .cgwr{width:610px;left:0;}
.nav .list .xz{width:630px;right:0;}
.nav .list .mt{width:580px;right:0;}
.nav .list .kyx{width:610px;right:0;}
.nav .list .wt{width:510px;right:0;}
.nav .list .cy{width:540px;right:0;}
.nav .list .wb{width:710px;right:0;}
.nav .list .xyx{width:740px;right:0;}
.nav .list .sp{width:730px;right:0;}
.nav .list .sc{width:700px;right:0;}
.content{margin:15px auto 0 auto;width:980px;height:500px;background:#ccc;}
</style>
<script type="text/javascript">
var $$ = function (id) {
 return document.getElementById(id);
}
var getByClass = function (oParent, sClass) {
 var aEle = oParent.getElementsByTagName("*");
 var re = new RegExp("\b" + sClass + "\b");
 var arr = [];
 for (var i = 0; i < aEle.length; i++) {
  if (re.test(aEle[i].className)) {
   arr.push(aEle[i]);
  }
 }
 return arr;
}
var setMainNav = function () {
 var oMainNav = $$("mainNav");
 var aLi = getByClass(oMainNav, "list")[0].getElementsByTagName("li");
 var aGameHover = getByClass(oMainNav, "game_hover");
 var aHoverCont = getByClass(oMainNav, "hover_cont");
 for (var i = 0; i < aGameHover.length; i++) {
  aGameHover[i].index = i;
  aGameHover[i].onmouseover = function () {
   this.className += " "+"game_hover_current";
   for (var j = 0; j < aHoverCont.length; j++) {
    aHoverCont[j].index_j = j;
    aHoverCont[j].style.display = "none";
    aHoverCont[j].onmouseover = function () {
     this.style.display = "block";
     aGameHover[this.index_j].className += " "+"game_hover_current";
    }
    aHoverCont[j].onmouseout = function () {
     this.style.display = "none";
    }
   }
   if (aHoverCont[this.index]) {
    aHoverCont[this.index].style.display = "block";
   }
  }
 }
 for (var i = 0; i < aLi.length; i++) {
  aLi[i].index = i;
  aLi[i].onmouseout = function () {
   if (aHoverCont[this.index]) {
    aHoverCont[this.index].style.display = "none";
   }
   aGameHover[this.index].className = "game_hover";
  }
 }
}
window.onload = function () {
 setMainNav();
}
</script>
</head>
<body>
<div class="header_bg">
 <div class="header">
  <div class="nav" id="mainNav">
   <ul class="list">
    <li>
     <a href="#" class="game_hover">网络游戏</a>
     <div class="hover_cont wlyx">
      <div class="nav_cont">
       <div class="nav_li">
        <div class="nav_li_l">
         热门网游
        </div>
        <div class="nav_li_r">
         <a href="#">问道</a>┊<a href="#">DOTA2</a>┊<a href="#">魔兽世界</a>┊<a href="#">梦幻西游</a>┊<a href="#">九阴真经</a>┊<a href="#">颓废之心</a>┊<a href="#">英雄联盟</a>┊<a href="#">天龙八部</a>┊<a href="#">龙之谷</a>┊<a href="#">星辰变</a><br />
          <a href="#">剑灵</a>┊<a href="#">征途2</a>┊<a href="#">神鬼世界</a>┊<a href="#">剑侠情缘3</a>┊<a href="#">倩女幽魂</a>┊<a href="#">永恒之塔</a>┊<a href="#">仙侠世界</a>┊<a href="#">龙门客栈</a>┊<a href="#">独孤求败</a>┊<a href="#">神武</a>
        </div>
       </div>
       <div class="nav_li">
        <div class="nav_li_l">
         期待网游
        </div>
        <div class="nav_li_r">
         <a href="#">问道</a>┊<a href="#">DOTA2</a>┊<a href="#">魔兽世界</a>┊<a href="#">梦幻西游</a>┊<a href="#">九阴真经</a>┊
         <a href="#">颓废之心</a>┊<a href="#">英雄联盟</a>┊<a href="#">天龙八部</a>┊<a href="#">龙之谷</a>┊<a href="#">星辰变</a><br />
          <a href="#">剑灵</a>┊<a href="#">征途2</a>┊<a href="#">神鬼世界</a>┊<a href="#">剑侠情缘3</a>┊<a href="#">倩女幽魂</a>┊
          <a href="#">永恒之塔</a>┊<a href="#">仙侠世界</a>┊<a href="#">龙门客栈</a>┊<a href="#">独孤求败</a>┊<a href="#">神武</a>
        </div>
       </div>
       <div class="nav_li">
        <div class="nav_li_l">
         新游尾行
        </div>
        <div class="nav_li_r">
         <a href="#" title="怪物猎人OL">怪物猎人OL全球玩家评论收集</a>┊<a href="#" title="圣王_新浪游戏">圣王首测视频解说</a>┊
         <a href="#" title="龙门客栈_新浪游戏">龙门客栈五大特色详解</a>┊<a href="#" title="行星边际2_新浪游戏">行星边际2老玩家10大建议</a>┊
         <a href="#" title="新游尾行汇总页" class="orange">更多>></a>
        </div>
       </div>
       <div class="nav_li">
        <div class="nav_li_l">
         热门厂商
        </div>
        <div class="nav_li_r">         
        <a href="#" title="腾讯游戏_新浪游戏">腾讯游戏</a>┊<a href="#" title="网易游戏_新浪游戏">网易游戏</a>┊
        <a href="#" title="盛大游戏_新浪游戏">盛大游戏</a>┊<a href="#" title="完美世界_新浪游戏">完美世界</a>┊
        <a href="#" title="巨人网络_新浪游戏">巨人网络</a>┊<a href="#" title="畅游_新浪游戏">畅游</a>┊<a href="#" title="游戏蜗牛_新浪游戏">游戏蜗牛</a>┊
        <a href="#" title="空中网_新浪游戏"

The above is the detailed content of Javascript imitation game website special effects mouse hover to display submenu. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Examples of seven ways to create objects using JavaScriptNext article：Examples of seven ways to create objects using JavaScript

Related articles

See more