導覽列 - Navbars

Result HTML JS 
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

<nav class="navbar" data-navbar>

  <div class="navbar-topbar">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler"
            type="button"
            data-toggle
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <div data-menu class="navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item js-active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
           href="#"
           role="button"
           data-dropdown
           data-target="nav-dropdown-menu"
           aria-haspopup="true"
           aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu"
          data-dropdown-menu="nav-dropdown-menu"
          data-place="bottom"
          data-align="left"
          data-offset-left="14">
          <a class="dropdown-item" href="#">選項1</a>
          <a class="dropdown-item" href="#">選項2</a>
          <a class="dropdown-item" href="#">選項3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled"
           href="#"
           tabindex="-1"
           aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline">
      <label class="search-input">
        <i class="icon-search"></i>
        <input class="input"
               type="text"
               placeholder="Search something" />
      </label>
    </form>
  </div>
</nav>

1
2
3
4
5
6

(function() {
  const { Navbar } = window.beyond
  const navbarDoms = Array.from(document.querySelectorAll('[data-navbar]'))

  navbarDoms.forEach(navbarDom => new Navbar(navbarDom))
})()
Result HTML JS 
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

<nav class="navbar navbar-type1" data-navbar>

  <div class="navbar-topbar">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler"
            type="button"
            data-toggle
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <div data-menu class="navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item js-active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
           href="#"
           role="button"
           data-dropdown
           data-target="nav-dropdown-menu"
           aria-haspopup="true"
           aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu"
             data-dropdown-menu="nav-dropdown-menu"
             data-place="bottom"
             data-align="left"
             data-offset-left="14">
          <a class="dropdown-item" href="#">選項1</a>
          <a class="dropdown-item" href="#">選項2</a>
          <a class="dropdown-item" href="#">選項3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled"
           href="#"
           tabindex="-1"
           aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline">
      <label class="search-input">
        <i class="icon-search"></i>
        <input class="input"
               type="text"
               placeholder="Search something" />
      </label>
    </form>
  </div>
</nav>

1
2
3
4
5
6

(function() {
  const { Navbar } = window.beyond
  const navbarDoms = Array.from(document.querySelectorAll('[data-navbar]'))

  navbarDoms.forEach(navbarDom => new Navbar(navbarDom))
})()
Result HTML JS 
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

<nav class="navbar navbar-type2" data-navbar>

  <div class="navbar-topbar">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler"
            type="button"
            data-toggle
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>

  <div data-menu class="navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item js-active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
           href="#"
           role="button"
           data-dropdown
           data-target="nav-dropdown-menu"
           aria-haspopup="true"
           aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu"
          data-dropdown-menu="nav-dropdown-menu"
          data-place="bottom"
          data-align="left"
          data-offset-left="14">
          <a class="dropdown-item" href="#">選項1</a>
          <a class="dropdown-item" href="#">選項2</a>
          <a class="dropdown-item" href="#">選項3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled"
           href="#"
           tabindex="-1"
           aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline">
      <label class="search-input">
        <i class="icon-search"></i>
        <input class="input"
               type="text"
               placeholder="Search something" />
      </label>
    </form>
  </div>
</nav>

1
2
3
4
5
6

(function() {
  const { Navbar } = window.beyond
  const navbarDoms = Array.from(document.querySelectorAll('[data-navbar]'))

  navbarDoms.forEach(navbarDom => new Navbar(navbarDom))
})()