Javascript는 제어된 다단계 드롭다운 menu_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Javascript는 제어된 다단계 드롭다운 menu_javascript 기술을 구현합니다.

May 16, 2016 pm 03:51 PM

javascript 다단계 드롭다운 메뉴

요즘 몸이 좋지 않아서 예정대로 소식을 전해드리지 못해서 죄송합니다. 여기에 코드를 직접 붙여넣으세요. 이해가 안 되는 부분이 있으면 메시지를 남겨주세요.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 
  &lt;head&gt;
    &lt;title&gt;下拉菜单&lt;/title&gt;
    &lt;meta http-equiv="content-Type" content="text/html;charset=utf-8"&gt;
    &lt;style type="text/css"&gt;
      .navi ul {
        padding: 0;
        list-style-type: none;
      }
      .navi ul li {
        text-align: center;
        float: left;
        position: relative;
        width: 200px;
        background-color: #0F8CFF;
      }
      a {
        color: #086808;
        text-decoration: none;
      }
      .navi ul li a {
        display: block;
        border: 1px solid #fff;
      }
      .navi ul li ul {
        display: none;
        left: 0;
      }
      .navi ul li ul li ul{
        position: absolute;
        left:200px;
        top: 0;
      }
      .navi ul li:hover ul a {
        color: yellow;
      }
    &lt;/style&gt;
 
    &lt;script type="text/javascript"&gt;
      function showNextMenu(obj){
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "block";
      }
      function hideNextMenu(obj){
        var nextMenu = obj.getElementsByTagName("ul")[0];
        nextMenu.style.display = "none";
      }
    &lt;/script&gt;
  &lt;/head&gt;
 
  &lt;body&gt;
 
    &lt;div class="navi"&gt;
      &lt;ul &gt;
        &lt;li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);"&gt;
          &lt;a href="javascript:;" &gt;游戏&lt;/a&gt;
          &lt;ul&gt;
            &lt;li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);"&gt;
              &lt;a href="javascript:;" &gt;传奇&lt;/a&gt;
 
              &lt;ul&gt;
                &lt;li&gt;
                  &lt;a href="javascript:;" &gt;1&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="javascript:;" &gt;2&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  &lt;a href="javascript:;" &gt;3&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="javascript:;" &gt;传奇&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="javascript:;" &gt;传奇&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="javascript:;" &gt;传奇&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="javascript:;" &gt;传奇&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="li_1"&gt;
          &lt;a href="javascript:;" &gt;游戏&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="javascript:;" &gt;传奇&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="li_1"&gt;
          &lt;a href="javascript:;" &gt;游戏&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="javascript:;" &gt;传奇&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="li_1"&gt;
          &lt;a href="javascript:;" &gt;游戏&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="javascript:;" &gt;传奇&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
 
  &lt;/body&gt;
 
&lt;/html&gt;

로그인 후 복사

렌더링은 다음과 같습니다.