Lil Regie's front-end workshop

Site header strap

A special strap that occurs once per page, and holds the logo, main navigation, and user menu.

Example

0 375 640 768 1024

Open in a new window

Code sample

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<body data-controller="toggle-menu">
  <header>
    <h1>
      <a href="#/">Lil Regie</a>
    </h1>
    <nav id="main_menu" aria-labelledby="header_nav_heading">
      <template data-toggle-menu-target="triggerTemplate">
        <a href="#main_menu" data-action="toggle-menu#toggle" class="link_close">Close the main menu</a>
      </template>
      <template data-toggle-menu-target="triggerTemplate">
        <a href="#main_menu" data-action="toggle-menu#toggle" class="button_menu">Menu</a>
      </template>
      <h2 id="header_nav_heading" class="screen_reader_only">
        Main navigation
      </h2>
      <ul id="site_menu">
        <li>
          <div class="dropdown" data-controller="dropdown">
            <input type="checkbox" role="button" aria-haspopup="true" id="main_menu_checkbox" data-action="change->dropdown#toggle" data-dropdown-target="checkbox">
            <label for="main_menu_checkbox" class="dropdown_trigger">
              <span>
                Solutions
              </span>
            </label>
            <div role="menu" class="dropdown_menu">
              <ul>
                <li>
                  <a href="#/solutions/event-registration/">
                    <img src="https://placekitten.com/72/72" width="36" height="36" alt="" loading="lazy">
                    Event registration
                    <span>
                      When you need to know who’s coming
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#/solutions/ticketing-only/">
                    <img src="https://placekitten.com/100/100" width="36" height="36" alt="" loading="lazy">
                    Ticketing only
                    <span>
                      When you’re just selling ‘seats’ e.g. Concerts
                    </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <a href="#/features/">
            Features
          </a>
        </li>
        <li>
          <a href="#/pricing/">
            Pricing
          </a>
        </li>
        <li>
          <a href="#/blog/">
            Blog
          </a>
        </li>
      </ul>
      <ul id="user_menu">
        <li class="screen_reader_only">
          <a href="#/sign-up/">
            Sign up
          </a>
        </li>
        <li>
          <a href="#/log-in/">
            Log in
          </a>
        </li>
        <li>
          <a class="button button_secondary button_theme_secondary" href="#/sign-up/">
            Get started
          </a>
        </li>
      </ul>
    </nav>
  </header>
  <hr>
  <main>
    <p>Main content</p>
  </main>
  <template data-toggle-menu-target="triggerTemplate">
    <a href="#main_menu" id="backdrop" data-action="toggle-menu#toggle">Close</a>
  </template>
</body>

Usage notes

Source files