Subnavbar - 图1

Subnavbar

Subnavbar is useful when you need to put any additional elements into Navbar, like Tab Links or Searchbar. It also remains visible when Navbar hidden

In Navbar

1. <div class="page page-with-subnavbar">
2. <!-- Navbar -->
3. <div class="navbar">
4. <div class="navbar-inner sliding">
5. <div class="left">...</div>
6. <div class="title">...</div>
7. <div class="right">...</div>

9. <!-- Subnavbar -->
10. <div class="subnavbar">
11. <div class="subnavbar-inner">
12. <!-- Subnavbar content, for example tabs buttons -->
13. <div class="segmented">
14. <a href="#tab1" class="button button-active">Tab 1</a>
15. <a href="#tab2" class="button">Tab 2</a>
16. <a href="#tab3" class="button">Tab 3</a>
17. </div>
18. </div>
19. </div>
20. </div>
21. </div>
22. <!-- Page content -->
23. <div class="page-content">
24. ...
25. </div>
26. </div>

Along with “left”, “right” and “title” elements, “subnavbar” also supports “sliding” class for sliding transition when used with Dynamic Navbar.

Note that page that contains Subnavbar must have additional **page-with-subnavbar** class which adds additional top padding required for subnavbar

In Page

It is also possible to put it as a direct child of page right after Navbar:

1. <div class="page page-with-subnavbar">
2. <!-- Navbar -->
3. <div class="navbar">
4. <div class="navbar-inner">
5. <div class="left">...</div>
6. <div class="title">...</div>
7. <div class="right">...</div>
8. </div>
9. </div>
10. <!-- Subnavbar -->
11. <div class="subnavbar">
12. <div class="subnavbar-inner">
13. <!-- Subnavbar content, for example tabs buttons -->
14. <div class="segmented">
15. <a href="#tab1" class="button button-active">Tab 1</a>
16. <a href="#tab2" class="button">Tab 2</a>
17. <a href="#tab3" class="button">Tab 3</a>
18. </div>
19. </div>
20. </div>
21. <!-- Page content -->
22. <div class="page-content">
23. ...
24. </div>
25. </div>

In Page Content

It is also possible to put it as a direct child of page-content. In this case it will be static and scroll with the page content:

1. <div class="page page-with-subnavbar">
2. <!-- Navbar -->
3. <div class="navbar">
4. <div class="navbar-inner">
5. <div class="left">...</div>
6. <div class="title">...</div>
7. <div class="right">...</div>
8. </div>
9. </div>

11. <!-- Page content -->
12. <div class="page-content">
13. <!-- Subnavbar -->
14. <div class="subnavbar">
15. <div class="subnavbar-inner">
16. <!-- Subnavbar content, for example tabs buttons -->
17. <div class="segmented">
18. <a href="#tab1" class="button button-active">Tab 1</a>
19. <a href="#tab2" class="button">Tab 2</a>
20. <a href="#tab3" class="button">Tab 3</a>
21. </div>
22. </div>
23. </div>
24. ...
25. </div>
26. </div>

Example

1. <div class="page">
2. <div class="navbar">
3. <div class="navbar-inner">
4. <div class="left"></div>
5. <div class="title">Sub Navbar</div>
6. <div class="right"></div>
7. <div class="subnavbar">
8. <div class="subnavbar-inner">
9. <div class="segmented segmented-raised">
10. <a class="button tab-link tab-link-active" href="#tab1">Tab 1</a>
11. <a class="button tab-link" href="#tab2">Tab 2</a>
12. <a class="button tab-link" href="#tab3">Tab 3</a>
13. </div>
14. </div>
15. </div>
16. </div>
17. </div>
18. <div class="page-content hide-navbar-on-scroll">
19. <div class="tabs">
20. <div class="tab tab-active" id="tab1">
21. <div class="block">
22. <p>Lorem ipsum dolor sit amet...</p>
23. </div>
24. </div>
25. <div class="tab" id="tab2">
26. <div class="block">
27. <p>Donec iaculis posuere massa sed dignissim...</p>
28. </div>
29. </div>
30. <div class="tab" id="tab3">
31. <div class="block">
32. <p>Etiam non interdum erat. Curabitur erat lacus...</p>
33. </div>
34. </div>
35. </div>
36. </div>
37. </div>