Team:Uppsala/navbar.css
From 2014.igem.org
(158 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | @font-face { | ||
+ | font-family: DeliciousRoman, Helvetica, Arial, sans-serif; | ||
+ | src: url(http://www.example.org/mycustomfont.ttf) format("truetype"); | ||
+ | font-weight:400; | ||
+ | } | ||
+ | |||
+ | /* ------- Font size dynamic with resolution ------- */ | ||
+ | |||
+ | |||
+ | /* ------- Nav-bar ----------- */ | ||
+ | |||
+ | #menu_container { | ||
+ | |||
+ | clear: both; | ||
+ | width:100%; | ||
+ | max-width: 1920px; | ||
+ | min-width: 1100px; | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | |||
+ | } | ||
+ | |||
+ | .clear { | ||
+ | clear: both; /* Vettefan varför man behöver en tom div som bara clearar, allting fuckade upp utan denna */ | ||
+ | } | ||
+ | |||
+ | #middle_logo { | ||
+ | position: relative; | ||
+ | width: 20%; | ||
+ | height: 0px; | ||
+ | border-top: 55px solid black; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .home_logo { | ||
+ | position: absolute; | ||
+ | top: -130px; | ||
+ | left: 50%; | ||
+ | margin-left: -125px; | ||
+ | width: 250px; | ||
+ | height: 187px; | ||
+ | |||
+ | } | ||
+ | |||
#menu { | #menu { | ||
- | background: # | + | background: #000; |
- | height: | + | height: 46px; |
+ | max-height:46px; | ||
+ | text-align: center; | ||
+ | font-family: "Times New Roman", Times, serif; | ||
+ | font-size: 18px; | ||
+ | font-variant: small-caps; | ||
+ | float: left; | ||
+ | width: 40%; | ||
+ | max-width: 768px; | ||
+ | min-width: 440px; | ||
+ | |||
+ | |||
} | } | ||
+ | |||
+ | #menu > ul { | ||
+ | |||
+ | min-width: 440px; | ||
+ | } | ||
+ | |||
#menu ul { | #menu ul { | ||
margin:0;padding:0; | margin:0;padding:0; | ||
position:absolute; | position:absolute; | ||
- | width: | + | width:40%; |
+ | max-width: 768px; | ||
+ | |||
} | } | ||
#menu ul a { | #menu ul a { | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
+ | |||
#menu ul li { | #menu ul li { | ||
list-style: none; | list-style: none; | ||
float: left; | float: left; | ||
position: relative; | position: relative; | ||
- | width: calc( | + | width: 25%; |
+ | min-width: 109px; | ||
+ | /*width: calc(225%/9); */ | ||
+ | |||
} | } | ||
- | #menu ul li | + | #menu > ul > li { |
+ | list-style: none; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 25%; | ||
+ | /* width: calc(225%/9); */ | ||
+ | border-top: 5px solid #000; | ||
+ | border-bottom: 5px solid #000; | ||
+ | webkit-transition: all 0.3s ease-in-out; | ||
+ | -moz-transition: all 0.3s ease-in-out; | ||
+ | -o-transition: all 0.3s ease-in-out; | ||
+ | transition: all 0.3s ease-in-out; | ||
+ | } | ||
- | background-color: # | + | #menu > ul > li:hover { |
+ | list-style: none; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 25%; | ||
+ | /* width: calc(225%/9); */ | ||
+ | border-top: 5px solid #d40400; | ||
+ | border-bottom: 5px solid #d40400; | ||
+ | background-color: #000; | ||
+ | } | ||
+ | |||
+ | #menu ul li a:hover { | ||
+ | color: #d40400; | ||
+ | background-color: #000; | ||
} | } | ||
#menu ul li a { | #menu ul li a { | ||
- | background: # | + | background: #000; |
color: #fff; | color: #fff; | ||
- | |||
display: block; | display: block; | ||
- | padding: | + | padding-top: 9px; |
+ | padding-bottom: 9px; | ||
width:100%; | width:100%; | ||
+ | |||
} | } | ||
+ | |||
#menu ul ul { | #menu ul ul { | ||
padding:0; | padding:0; | ||
overflow: hidden; | overflow: hidden; | ||
+ | width: 100%; | ||
} | } | ||
+ | |||
+ | #menu ul ul li:first-child { | ||
+ | margin-top: 5px; | ||
+ | float: none; | ||
+ | display: none; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | border-left: 1px solid #ccc; | ||
+ | border-right: 1px solid #ccc;' | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | |||
#menu ul ul li { | #menu ul ul li { | ||
float: none; | float: none; | ||
Line 41: | Line 148: | ||
border-left: 1px solid #ccc; | border-left: 1px solid #ccc; | ||
border-right: 1px solid #ccc; | border-right: 1px solid #ccc; | ||
+ | width: 100%; | ||
+ | z-index: 1000; | ||
} | } | ||
#menu ul ul li a { | #menu ul ul li a { | ||
Line 46: | Line 155: | ||
color: #333; | color: #333; | ||
border:none; | border:none; | ||
- | width: calc(100%/ | + | width: 11.11%; |
+ | /* width: calc(100%/9); */ | ||
} | } | ||
#menu ul ul li a:hover { | #menu ul ul li a:hover { | ||
background: #ccc; | background: #ccc; | ||
} | } | ||
+ | |||
#menu ul li a:hover, | #menu ul li a:hover, | ||
#menu ul li:hover ul li { | #menu ul li:hover ul li { | ||
display:block !important; | display:block !important; | ||
} | } | ||
+ | |||
#menu ul li ul li{ | #menu ul li ul li{ | ||
- | width: | + | width:900%; |
+ | } | ||
+ | |||
+ | #menu_right { | ||
+ | text-align: center; | ||
+ | background: #000; | ||
+ | height: 46px; | ||
+ | max-height:46px; | ||
+ | float: right; | ||
+ | width: 40%; | ||
+ | max-width: 768px; | ||
+ | min-width: 440px; | ||
+ | text-align: center; | ||
+ | font-family: "Times New Roman", Times, serif; | ||
+ | font-size: 18px; | ||
+ | font-variant: small-caps; | ||
+ | //font-weight:bold; | ||
+ | |||
+ | } | ||
+ | |||
+ | #menu_right > ul { | ||
+ | |||
+ | min-width: 440px; | ||
+ | } | ||
+ | |||
+ | #menu_right ul { | ||
+ | margin:0;padding:0; | ||
+ | position:absolute; | ||
+ | width:40%; | ||
+ | max-width: 768px; | ||
+ | |||
+ | } | ||
+ | #menu_right ul a { | ||
+ | text-decoration: none; | ||
+ | |||
+ | } | ||
+ | |||
+ | #menu_right ul li { | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 25%; | ||
+ | min-width: 110px; | ||
+ | /* width: calc(225%/9); */ | ||
+ | } | ||
+ | |||
+ | #menu_right > ul > li { | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 25%; | ||
+ | /* width: calc(225%/9); */ | ||
+ | border-top: 5px solid #000; | ||
+ | border-bottom: 5px solid #000; | ||
+ | webkit-transition: all 0.3s ease-in-out; | ||
+ | -moz-transition: all 0.3s ease-in-out; | ||
+ | -o-transition: all 0.3s ease-in-out; | ||
+ | transition: all 0.3s ease-in-out; | ||
+ | } | ||
+ | |||
+ | #menu_right > ul > li:hover { | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | width: 25%; | ||
+ | /* width: calc(225%/9); */ | ||
+ | border-top: 5px solid #d40400; | ||
+ | border-bottom: 5px solid #d40400; | ||
+ | background-color: #000; | ||
+ | } | ||
+ | |||
+ | #menu_right ul li a:hover { | ||
+ | |||
+ | color: #d40400; | ||
+ | background-color: #000; | ||
+ | } | ||
+ | |||
+ | #menu_right ul li a { | ||
+ | background: #000; | ||
+ | color: #fff; | ||
+ | display: block; | ||
+ | padding-top: 9px; | ||
+ | padding-bottom: 9px; | ||
+ | width:100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | #menu_right ul ul { | ||
+ | padding:0; | ||
+ | overflow: hidden; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #menu_right ul ul li:first-child { | ||
+ | margin-top: 5px; | ||
+ | float: none; | ||
+ | display: none; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | border-left: 1px solid #ccc; | ||
+ | border-right: 1px solid #ccc;' | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #menu_right ul ul li { | ||
+ | float: none; | ||
+ | display: none; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | border-left: 1px solid #ccc; | ||
+ | border-right: 1px solid #ccc; | ||
+ | width: 100%; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | |||
+ | #menu_right ul ul li a { | ||
+ | background: #f0f0f0; | ||
+ | color: #333; | ||
+ | border:none; | ||
+ | width: 11.11%; | ||
+ | /* width: calc(100%/9); */ | ||
+ | } | ||
+ | #menu_right ul ul li a:hover { | ||
+ | background: #ccc; | ||
+ | } | ||
+ | |||
+ | #menu_right ul li a:hover, | ||
+ | #menu_right ul li:hover ul li { | ||
+ | display:block !important; | ||
+ | } | ||
+ | |||
+ | #menu_right ul li ul li{ | ||
+ | width:900%; | ||
} | } |
Latest revision as of 18:16, 16 October 2014
@font-face {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif; src: url(http://www.example.org/mycustomfont.ttf) format("truetype"); font-weight:400;
}
/* ------- Font size dynamic with resolution ------- */
/* ------- Nav-bar ----------- */
- menu_container {
clear: both; width:100%; max-width: 1920px; min-width: 1100px; margin-right: auto; margin-left: auto;
}
.clear { clear: both; /* Vettefan varför man behöver en tom div som bara clearar, allting fuckade upp utan denna */ }
- middle_logo {
position: relative;
width: 20%; height: 0px; border-top: 55px solid black; float: left; }
.home_logo { position: absolute; top: -130px; left: 50%; margin-left: -125px; width: 250px; height: 187px;
}
- menu {
background: #000; height: 46px; max-height:46px; text-align: center; font-family: "Times New Roman", Times, serif; font-size: 18px; font-variant: small-caps; float: left; width: 40%; max-width: 768px; min-width: 440px;
}
- menu > ul {
min-width: 440px;
}
- menu ul {
margin:0;padding:0; position:absolute; width:40%; max-width: 768px;
}
- menu ul a {
text-decoration: none;
}
- menu ul li {
list-style: none; float: left; position: relative; width: 25%; min-width: 109px; /*width: calc(225%/9); */
}
- menu > ul > li {
list-style: none; float: left; position: relative; width: 25%; /* width: calc(225%/9); */ border-top: 5px solid #000; border-bottom: 5px solid #000;
webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
- menu > ul > li:hover {
list-style: none; float: left; position: relative; width: 25%; /* width: calc(225%/9); */ border-top: 5px solid #d40400; border-bottom: 5px solid #d40400; background-color: #000;
}
- menu ul li a:hover {
color: #d40400; background-color: #000; }
- menu ul li a {
background: #000; color: #fff; display: block; padding-top: 9px; padding-bottom: 9px; width:100%;
}
- menu ul ul {
padding:0; overflow: hidden; width: 100%;
}
- menu ul ul li:first-child {
margin-top: 5px; float: none; display: none; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;' width: 100%;
}
- menu ul ul li {
float: none; display: none; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; width: 100%; z-index: 1000;
}
- menu ul ul li a {
background: #f0f0f0; color: #333; border:none; width: 11.11%; /* width: calc(100%/9); */
}
- menu ul ul li a:hover {
background: #ccc;
}
- menu ul li a:hover,
- menu ul li:hover ul li {
display:block !important;
}
- menu ul li ul li{
width:900%; }
- menu_right {
text-align: center; background: #000; height: 46px; max-height:46px; float: right; width: 40%; max-width: 768px; min-width: 440px; text-align: center; font-family: "Times New Roman", Times, serif; font-size: 18px; font-variant: small-caps; //font-weight:bold;
}
- menu_right > ul {
min-width: 440px;
}
- menu_right ul {
margin:0;padding:0; position:absolute; width:40%; max-width: 768px;
}
- menu_right ul a {
text-decoration: none;
}
- menu_right ul li {
list-style: none; float: left; position: relative; width: 25%; min-width: 110px; /* width: calc(225%/9); */
}
- menu_right > ul > li {
list-style: none; float: left; position: relative; width: 25%; /* width: calc(225%/9); */ border-top: 5px solid #000; border-bottom: 5px solid #000;
webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
- menu_right > ul > li:hover {
list-style: none; float: left; position: relative; width: 25%; /* width: calc(225%/9); */ border-top: 5px solid #d40400; border-bottom: 5px solid #d40400; background-color: #000;
}
- menu_right ul li a:hover {
color: #d40400; background-color: #000; }
- menu_right ul li a {
background: #000; color: #fff; display: block; padding-top: 9px; padding-bottom: 9px; width:100%;
}
- menu_right ul ul {
padding:0; overflow: hidden; width: 100%;
}
- menu_right ul ul li:first-child {
margin-top: 5px; float: none; display: none; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc;' width: 100%;
}
- menu_right ul ul li {
float: none; display: none; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; width: 100%; z-index: 1000;
}
- menu_right ul ul li a {
background: #f0f0f0; color: #333; border:none; width: 11.11%; /* width: calc(100%/9); */
}
- menu_right ul ul li a:hover {
background: #ccc;
}
- menu_right ul li a:hover,
- menu_right ul li:hover ul li {
display:block !important;
}
- menu_right ul li ul li{
width:900%; }