moofing's blog
首页 标签 分类 归档 RSS

code moonlight & basic navigation

2021-02-12 practice | 本篇文章共1.3k字，预计阅读8分钟

navigation is a concerful section for a common website , so make a navigation to a basic and vital task , totaly the ui of navigation is seem accordant , the core of all is layout about left and right , the event of onclick , the on or off for the secondList

using native javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel='stylesheet' href='./reset.css'/>
  <link rel='stylesheet' href='./pattern.css'/>
  <link rel='stylesheet' href='./iconfont.css'/>
  <title>the navigation for using native summary</title>
</head>
<body>
  <div id='nav'>
    <div id='nav_title'>
      <h3><a href='javascript:;'>FutureWorld</a></h3>
    </div>
    <div id='nav_body'>
      <ul>
        <li>
          <p><a href='javascript:;'><sapn>mainpag</sapn>&nbsp<i class='iconfont icon-xiasanjiaoxing'></i></a></p>
          <div class='secondList'>
            <ul class='childList'>
            <li><a href='javascript:;'>make different</a></li>
            <li><a href='javascript:;'>choice of jobs</a></li>
            <li><a href='javascript:;'>stand up write</a></li>
            <li><a href='javascript:;'>about this event</a></li>
            </ul>
          </div>
        </li>
        <li>
          <p><a href='javascript:;'><sapn>technology</sapn>&nbsp<i class='iconfont icon-xiasanjiaoxing'></i></a></p>
          <div>
            <ul class='childList'>
            <li><a href='javascript:;'>night star shine</a></li>
            <li><a href='javascript:;'>silence and cold</a></li>
            <li><a href='javascript:;'>foan sing enling </a></li>
            <li><a href='javascript:;'>funale ksng lssso</a></li>
            </ul>
          </div>
        </li>
        <li>
          <p><a href='javascript:;'>social</a></p>
        </li>
        <li>
          <p><a href='javascript:;'>famous</a></p>
        </li>
      </ul>
    </div>
  </div>
  <div id='contain'>
  </div>
  <script>
    let para=document.getElementById('nav_body').getElementsByTagName('p')
    for(let i=0; i<para.length;i++){
      para[i].onclick=function(){
        let secondListName=this.nextElementSibling.className
        if(secondListName=='secondList'){
          this.nextElementSibling.className=' '
        }else{
          this.nextElementSibling.className ='secondList'
        }
      }
    }
  </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
#nav {
  height:56px;
  box-sizing:border-box;
  padding:0 30px 0 30px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}
#nav>#nav_title {
  float:left;
}
#nav>#nav_body>ul>li {
  float:left;
  margin-left:40px;
  position:relative;
}
#nav a {
  color:#000;
}
#nav .secondList {
  display:none;
}
#nav .childList {
  position:absolute;
  right:0;
  top:28px;
  box-sizing:border-box;
  padding:10px 20px;
  width:200px;
  height:180px;
  border:1px solid rgb(200,200,200);
  background-color:rgb(255, 255, 255); 
}
#nav .childList>li {
  margin:6px;
  padding-bottom:8px;
  border-bottom:1px solid rgb(220,220,220)
}
#nav .childList>li>a {
  color:rgb(80,80,80)
}

#contain {
  height:500px;
  background-color:rgb(242,242,242)
}

using jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel='stylesheet' href='./reset.css'/>
  <link rel='stylesheet' href='./pattern.css'/>
  <link rel='stylesheet' href='./iconfont.css'/>
  <script src='./jquery-3.5.1.js'></script>
  <script src='./index.js'></script>
  <title>the navigation for using jquery</title>
</head>
<body>
  <div id='nav'>
    <div id='nav_title'>
      <h3><a href='javascript:;'>FutureWorld</a></h3>
    </div>
    <div id='nav_body'>
      <ul>
        <li>
          <p class='body_menu'><a href='javascript:;'><sapn>mainpag</sapn>&nbsp<i class='iconfont icon-xiasanjiaoxing'></i></a></p>
          <div class='secondList'>
            <ul class='childList'>
            <li><a href='javascript:;'>make different</a></li>
            <li><a href='javascript:;'>choice of jobs</a></li>
            <li><a href='javascript:;'>stand up write</a></li>
            <li><a href='javascript:;'>about this event</a></li>
            </ul>
          </div>
        </li>
        <li>
          <p class='body_menu'><a href='javascript:;'><sapn>technology</sapn>&nbsp<i class='iconfont icon-xiasanjiaoxing'></i></a></p>
          <div class='secondList'>
            <ul class='childList'>
            <li><a href='javascript:;'>night star shine</a></li>
            <li><a href='javascript:;'>silence and cold</a></li>
            <li><a href='javascript:;'>foan sing enling </a></li>
            <li><a href='javascript:;'>funale ksng lssso</a></li>
            </ul>
          </div>
        </li>
        <li>
          <p><a href='javascript:;'>social</a></p>
        </li>
        <li>
          <p><a href='javascript:;'>famous</a></p>
        </li>
      </ul>
    </div>
  </div>
  <div id='contain'>
  </div>
</body>
</html>
1
2
3
4
5
6
$(function(){
  $('.body_menu').click(function () {
    let mouseSelect = $(this).next('div')
    mouseSelect.toggleClass('secondList')
  })
})

本文作者： moofing

本文链接： https://moofing.gitee.io/posts/e58a9993.html

版权声明： 本文采用 CC BY-NC-SA 4.0进行许可，转载或引用时请遵守该协议

更新于 2021-02-24

practice
Previous Post
code moonlight && general carousel
Next Post
Vue & todoList实例