Difference between revisions of "Template:Team:Lethbridge/navbar"
Keithaiken (Talk | contribs) |
Keithaiken (Talk | contribs) |
||
| Line 2: | Line 2: | ||
<head> | <head> | ||
<style> | <style> | ||
| − | + | #LethNav { | |
margin: 20px 0; | margin: 20px 0; | ||
padding: 10px; | padding: 10px; | ||
| Line 8: | Line 8: | ||
} | } | ||
| − | ul { | + | #LethNav ul { |
padding: 0; | padding: 0; | ||
margin: 0; | margin: 0; | ||
| Line 15: | Line 15: | ||
} | } | ||
| − | ul li { | + | #LethNav ul li { |
display: inline-block; | display: inline-block; | ||
padding: 0 0px; | padding: 0 0px; | ||
} | } | ||
| − | li a { | + | #LethNav li a { |
display:block; | display:block; | ||
min-width:140px; | min-width:140px; | ||
| Line 33: | Line 33: | ||
/*Hover state for top level links*/ | /*Hover state for top level links*/ | ||
| − | li:hover a { | + | #LethNav li:hover a { |
background: hsla(0, 80%, 47%, 1); | background: hsla(0, 80%, 47%, 1); | ||
color: white; | color: white; | ||
| Line 39: | Line 39: | ||
/*Prevent text wrapping*/ | /*Prevent text wrapping*/ | ||
| − | li ul li a { | + | #LethNav li ul li a { |
width: auto; | width: auto; | ||
min-width: 100px; | min-width: 100px; | ||
| Line 46: | Line 46: | ||
/*Style 'show menu' label button and hide it by default*/ | /*Style 'show menu' label button and hide it by default*/ | ||
| − | .show-menu { | + | #LethNav .show-menu { |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
text-decoration: none; | text-decoration: none; | ||
| Line 61: | Line 61: | ||
/*Show menu when invisible checkbox is checked*/ | /*Show menu when invisible checkbox is checked*/ | ||
| − | input[type=checkbox]:checked ~ # | + | input[type=checkbox]:checked ~ #LethMenu{ |
display: block; | display: block; | ||
} | } | ||
| Line 67: | Line 67: | ||
@media screen and (max-width : 760px){ | @media screen and (max-width : 760px){ | ||
/*Make dropdown links appear inline*/ | /*Make dropdown links appear inline*/ | ||
| − | ul { | + | #LethNav ul { |
position: static; | position: static; | ||
display: none; | display: none; | ||
} | } | ||
/*Create vertical spacing*/ | /*Create vertical spacing*/ | ||
| − | li { | + | #LethNav li { |
margin-bottom: 1px; | margin-bottom: 1px; | ||
} | } | ||
/*Make all menu links full width*/ | /*Make all menu links full width*/ | ||
| − | ul li, li a { | + | #LethNav ul li, li a { |
width: 100%; | width: 100%; | ||
} | } | ||
/*Display 'show menu' link*/ | /*Display 'show menu' link*/ | ||
| − | .show-menu { | + | #LethNav .show-menu { |
display:block; | display:block; | ||
} | } | ||
| Line 88: | Line 88: | ||
<body> | <body> | ||
| − | <nav> | + | <nav id="LethNav"> |
<label for="show-menu" class="show-menu">Show Menu</label> | <label for="show-menu" class="show-menu">Show Menu</label> | ||
<input type="checkbox" id="show-menu" role="button"> | <input type="checkbox" id="show-menu" role="button"> | ||
| − | <ul id=" | + | <ul id="LethMenu"> |
<li><a href="#">Home</a></li> | <li><a href="#">Home</a></li> | ||
<li><a href="#">Project</a></li> | <li><a href="#">Project</a></li> | ||
Revision as of 04:20, 22 August 2017
