Difference between revisions of "Team:Macquarie Australia/NavBarCss"

Line 1: Line 1:
−
/* #F93 */
+
#TopBar {
−
/* #C60 */
+
width: 1000px;
−
#navbar {
+
min-width: 800px;
−
  border: none;
+
height: 800px;
−
  border: 0px;
+
text-align: center;
−
  margin: 0px;
+
position: fixed;
−
  padding: 0px;
+
top: 80px;
−
  font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
+
−
  font-size: 14px;
+
−
  font-weight: bold;
+
−
  width: auto;
+
 
}
 
}
−
#navbar ul {
+
 
−
  background: #50b738;
+
#TopBar #TopLvlNavLink {
−
  height: 50px;
+
display: none;
−
  list-style: none;
+
padding: 16px;
−
  margin: 0;
+
   margin-top: 20px;
−
  padding: 0;
+
   height: 1500px; /* Used in this example to enable scrolling */
−
  -webkit-border-radius: 15px;
+
−
  -moz-border-radius: 15px;
+
−
  border-radius: 15px;
+
−
  -webkit-box-shadow: inset 0px 16px 0px 0px white(255, 255, 255, 0.1);
+
−
   -moz-box-shadow: inset 0px 16px 0px 0px white(255, 255, 255, 0.1);
+
−
   box-shadow: inset 0px 16px 0px 0px white(255, 255, 255, 0.1);
+
 
}
 
}
−
#navbar li {
+
 
−
  float: left;
+
#TopBar ul {
−
  padding: 0px 0px 0px 15px;
+
background: #50b738;
 +
list-style: none;
 +
position: relative;
 +
display: inline-table;
 +
padding: 0;
 +
margin: 0;
 +
       
 +
     
 
}
 
}
−
#navbar li a {
+
 
−
  color: #000;
+
#TopBar ul:after {
−
  display: block;
+
content: "";
−
  font-weight: normal;
+
clear: both;
−
  line-height: 50px;
+
display: block;
−
  margin: 0px;
+
−
  padding: 0px 25px;
+
−
  text-align: center;
+
−
  text-decoration: none;
+
 
}
 
}
−
#navbar li a:hover {
+
 
−
  background: #7bc470;
+
#TopBar li {
−
  color: #FFF;
+
float: left;
−
  text-decoration: none;
+
width: 155px;
−
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
+
text-align: center;
−
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
+
 
−
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
+
 
}
 
}
−
#navbar ul li:hover a {
+
 
−
  background: #50b738;
+
#TopBar li:hover > a {
−
  color: #FFF;
+
//font-weight: bold;
−
  text-decoration: none;
+
        font-family: Arial;
 +
text-shadow: 0px 0px 15px white, 0px 1px 15px white;
 +
//text-shadow: 0px -1px 4px white, 0px -2px 10px white, 0px -10px 20px white, 0px -18px 40px yellow;
 +
 
}
 
}
−
#navbar li ul {
+
 
−
  display: none;
+
#TopBar a {
−
  height: auto;
+
display: block;
−
  padding: 0px;
+
width: 120%;
−
  margin: 0px;
+
height: 100%;
−
  border: 0px;
+
padding: 15px 0;
−
  position: absolute;
+
color: #FFF;
−
  width: 200px;
+
//color: #7bc470;
−
  z-index: 200;
+
text-decoration: none;
 +
font: 16px "Arial;",
 +
        text-align: center;
 
}
 
}
−
#navbar li:hover ul {
+
 
−
  display: block;
+
#TopBar > #TopLvlNav  > li > a {
 +
padding: 5px 0;
 
}
 
}
−
#navbar li li {
 
−
  display: block;
 
−
  float: none;
 
−
  margin: 0px;
 
−
  padding: 0px;
 
−
  width: 200px;
 
−
  background: #ff9933;
 
−
  /*this is where the rounded corners for the dropdown disappears*/
 
  
 +
#TopBar ul ul {
 +
display: none;
 +
background: #50b738;
 +
padding: 0 10px;
 +
position: absolute;
 +
top: 95%;
 +
z-index: 10;
 +
margin-left: -10px;
 +
width: 150px
 
}
 
}
−
#navbar li:hover li a {
+
 
−
  background: none;
+
#TopBar ul li:hover > ul {
 +
display: block;
 +
font: 16px "Arial;",
 
}
 
}
−
#navbar li ul a {
+
 
−
  display: block;
+
#TopBar ul ul li {
−
  height: 50px;
+
float: none;
−
  font-size: 12px;
+
position: relative;
−
  font-style: normal;
+
−
  margin: 0px;
+
−
  padding: 0px 10px 0px 15px;
+
−
  text-align: left;
+
 
}
 
}
−
#navbar li ul a:hover,
+
 
−
#navbar li ul li:hover a {
+
#TopBar ul ul a {
−
  border: 0px;
+
font-size: 16px;
−
  color: #FFF;
+
        font-family: Arial;
−
  text-decoration: none;
+
}
−
  background: #cc6600;
+
 
−
  -webkit-box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);
+
#TopBar ul ul ul {
−
  -moz-box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);
+
position: absolute;
−
  box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);
+
left: 100%;
 +
top: 0;
 +
margin: 0;
 +
}
 +
 
 +
#TopBar #LogoItem {
 +
padding: 8px 0;
 +
}
 +
 
 +
#TopBarCollapse {
 +
position: fixed;
 +
width: 120px;
 +
height: 60px;
 +
top: 25px;
 +
background: orange;
 +
z-index: 10;
 +
}
 +
 
 +
#TopBarCollapse #TopLvlNavLink {
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 
 +
#TopBarCollapse:after {
 +
content: "";
 +
clear: both;
 +
display: block;
 +
}
 +
 
 +
#TopBarCollapse ul {
 +
display: none;
 +
list-style: none;
 +
padding: 0;
 +
}
 +
 
 +
#TopBarCollapse ul:after {
 +
content: "";
 +
clear: both;
 +
display: block;
 +
}
 +
 
 +
#TopBarCollapse li {
 +
float: left;
 +
display: block;
 +
clear: both;
 +
width: 120px;
 +
padding: 0;
 +
background: green;
 +
}
 +
 
 +
#TopBarCollapse li:hover {
 +
background: pink;
 +
}
 +
 
 +
#TopBarCollapse a {
 +
color: #FFFFFF;
 +
display: block;
 +
text-decoration: none;
 +
padding: 10px 15px;
 +
}
 +
 
 +
.contentContainer {
 +
width: 959px;
 +
background-color: #fff;
 +
margin: 0px -5px;
 +
padding: 0px 8px;
 
}
 
}

Revision as of 14:14, 20 October 2017

  1. TopBar {

width: 1000px; min-width: 800px; height: 800px; text-align: center; position: fixed; top: 80px; }

  1. TopBar #TopLvlNavLink {

display: none; padding: 16px; 

 margin-top: 20px;
 height: 1500px; /* Used in this example to enable scrolling */

}

  1. TopBar ul {

background: #50b738; list-style: none; position: relative; display: inline-table; padding: 0; margin: 0;


}

  1. TopBar ul:after {

content: ""; clear: both; display: block; }

  1. TopBar li {

float: left; width: 155px; text-align: center;

}

  1. TopBar li:hover > a {

//font-weight: bold; 

       font-family: Arial;

text-shadow: 0px 0px 15px white, 0px 1px 15px white; //text-shadow: 0px -1px 4px white, 0px -2px 10px white, 0px -10px 20px white, 0px -18px 40px yellow;

}

  1. TopBar a {

display: block; width: 120%; height: 100%; padding: 15px 0; color: #FFF; //color: #7bc470; text-decoration: none; font: 16px "Arial;", 

       text-align: center;

}

  1. TopBar > #TopLvlNav > li > a {

padding: 5px 0; }

  1. TopBar ul ul {

display: none; background: #50b738; padding: 0 10px; position: absolute; top: 95%; z-index: 10; margin-left: -10px; width: 150px }

  1. TopBar ul li:hover > ul {

display: block; font: 16px "Arial;", }

  1. TopBar ul ul li {

float: none; position: relative; }

  1. TopBar ul ul a {

font-size: 16px; 

       font-family: Arial;

}

  1. TopBar ul ul ul {

position: absolute; left: 100%; top: 0; margin: 0; }

  1. TopBar #LogoItem {

padding: 8px 0; }

  1. TopBarCollapse {

position: fixed; width: 120px; height: 60px; top: 25px; background: orange; z-index: 10; }

  1. TopBarCollapse #TopLvlNavLink {

display: block; width: 100%; height: 100%; }

  1. TopBarCollapse:after {

content: ""; clear: both; display: block; }

  1. TopBarCollapse ul {

display: none; list-style: none; padding: 0; }

  1. TopBarCollapse ul:after {

content: ""; clear: both; display: block; }

  1. TopBarCollapse li {

float: left; display: block; clear: both; width: 120px; padding: 0; background: green; }

  1. TopBarCollapse li:hover {

background: pink; }

  1. TopBarCollapse a {

color: #FFFFFF; display: block; text-decoration: none; padding: 10px 15px; }

.contentContainer { width: 959px; background-color: #fff; margin: 0px -5px; padding: 0px 8px; }