| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 |
|
| 5 | <meta charset="utf-8" />
|
| 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
| 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
| 8 |
|
| 9 |
|
| 10 | <title>Fixed Menu Example - Semantic</title>
|
| 11 |
|
| 12 | <link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
|
| 13 | <link rel="stylesheet" type="text/css" href="../dist/components/site.css">
|
| 14 |
|
| 15 | <link rel="stylesheet" type="text/css" href="../dist/components/container.css">
|
| 16 | <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
|
| 17 | <link rel="stylesheet" type="text/css" href="../dist/components/header.css">
|
| 18 | <link rel="stylesheet" type="text/css" href="../dist/components/image.css">
|
| 19 | <link rel="stylesheet" type="text/css" href="../dist/components/menu.css">
|
| 20 |
|
| 21 | <link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
|
| 22 | <link rel="stylesheet" type="text/css" href="../dist/components/list.css">
|
| 23 | <link rel="stylesheet" type="text/css" href="../dist/components/segment.css">
|
| 24 | <link rel="stylesheet" type="text/css" href="../dist/components/dropdown.css">
|
| 25 | <link rel="stylesheet" type="text/css" href="../dist/components/icon.css">
|
| 26 |
|
| 27 | <style type="text/css">
|
| 28 | body {
|
| 29 | background-color: #FFFFFF;
|
| 30 | }
|
| 31 | .ui.menu .item img.logo {
|
| 32 | margin-right: 1.5em;
|
| 33 | }
|
| 34 | .main.container {
|
| 35 | margin-top: 7em;
|
| 36 | }
|
| 37 | .wireframe {
|
| 38 | margin-top: 2em;
|
| 39 | }
|
| 40 | .ui.footer.segment {
|
| 41 | margin: 5em 0em 0em;
|
| 42 | padding: 5em 0em;
|
| 43 | }
|
| 44 | </style>
|
| 45 |
|
| 46 | </head>
|
| 47 | <body>
|
| 48 |
|
| 49 | <div class="ui fixed inverted menu">
|
| 50 | <div class="ui container">
|
| 51 | <a href="#" class="header item">
|
| 52 | <img class="logo" src="assets/images/logo.png">
|
| 53 | Project Name
|
| 54 | </a>
|
| 55 | <a href="#" class="item">Home</a>
|
| 56 | <div class="ui simple dropdown item">
|
| 57 | Dropdown <i class="dropdown icon"></i>
|
| 58 | <div class="menu">
|
| 59 | <a class="item" href="#">Link Item</a>
|
| 60 | <a class="item" href="#">Link Item</a>
|
| 61 | <div class="divider"></div>
|
| 62 | <div class="header">Header Item</div>
|
| 63 | <div class="item">
|
| 64 | <i class="dropdown icon"></i>
|
| 65 | Sub Menu
|
| 66 | <div class="menu">
|
| 67 | <a class="item" href="#">Link Item</a>
|
| 68 | <a class="item" href="#">Link Item</a>
|
| 69 | </div>
|
| 70 | </div>
|
| 71 | <a class="item" href="#">Link Item</a>
|
| 72 | </div>
|
| 73 | </div>
|
| 74 | </div>
|
| 75 | </div>
|
| 76 |
|
| 77 | <div class="ui main text container">
|
| 78 | <h1 class="ui header">Semantic UI Fixed Template</h1>
|
| 79 | <p>This is a basic fixed menu template using fixed size containers.</p>
|
| 80 | <p>A text container is used for the main container, which is useful for single column layouts</p>
|
| 81 | <img class="wireframe" src="assets/images/wireframe/media-paragraph.png">
|
| 82 | <img class="wireframe" src="assets/images/wireframe/paragraph.png">
|
| 83 | <img class="wireframe" src="assets/images/wireframe/paragraph.png">
|
| 84 | <img class="wireframe" src="assets/images/wireframe/paragraph.png">
|
| 85 | <img class="wireframe" src="assets/images/wireframe/paragraph.png">
|
| 86 | <img class="wireframe" src="assets/images/wireframe/paragraph.png">
|
| 87 | <img class="wireframe" src="assets/images/wireframe/paragraph.png">
|
| 88 | </div>
|
| 89 |
|
| 90 | <div class="ui inverted vertical footer segment">
|
| 91 | <div class="ui center aligned container">
|
| 92 | <div class="ui stackable inverted divided grid">
|
| 93 | <div class="three wide column">
|
| 94 | <h4 class="ui inverted header">Group 1</h4>
|
| 95 | <div class="ui inverted link list">
|
| 96 | <a href="#" class="item">Link One</a>
|
| 97 | <a href="#" class="item">Link Two</a>
|
| 98 | <a href="#" class="item">Link Three</a>
|
| 99 | <a href="#" class="item">Link Four</a>
|
| 100 | </div>
|
| 101 | </div>
|
| 102 | <div class="three wide column">
|
| 103 | <h4 class="ui inverted header">Group 2</h4>
|
| 104 | <div class="ui inverted link list">
|
| 105 | <a href="#" class="item">Link One</a>
|
| 106 | <a href="#" class="item">Link Two</a>
|
| 107 | <a href="#" class="item">Link Three</a>
|
| 108 | <a href="#" class="item">Link Four</a>
|
| 109 | </div>
|
| 110 | </div>
|
| 111 | <div class="three wide column">
|
| 112 | <h4 class="ui inverted header">Group 3</h4>
|
| 113 | <div class="ui inverted link list">
|
| 114 | <a href="#" class="item">Link One</a>
|
| 115 | <a href="#" class="item">Link Two</a>
|
| 116 | <a href="#" class="item">Link Three</a>
|
| 117 | <a href="#" class="item">Link Four</a>
|
| 118 | </div>
|
| 119 | </div>
|
| 120 | <div class="seven wide column">
|
| 121 | <h4 class="ui inverted header">Footer Header</h4>
|
| 122 | <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
|
| 123 | </div>
|
| 124 | </div>
|
| 125 | <div class="ui inverted section divider"></div>
|
| 126 | <img src="assets/images/logo.png" class="ui centered mini image">
|
| 127 | <div class="ui horizontal inverted small divided link list">
|
| 128 | <a class="item" href="#">Site Map</a>
|
| 129 | <a class="item" href="#">Contact Us</a>
|
| 130 | <a class="item" href="#">Terms and Conditions</a>
|
| 131 | <a class="item" href="#">Privacy Policy</a>
|
| 132 | </div>
|
| 133 | </div>
|
| 134 | </div>
|
| 135 | </body>
|
| 136 |
|
| 137 | </html>
|