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

Revision as of 13:52, 20 October 2017 (view source) Thuynh (Talk | contribs) ← Older edit		Revision as of 14:11, 20 October 2017 (view source) Thuynh (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	#TopBar {	+	/* #F93 */
−	width: 100%;	+	/* #C60 */
−	min-width: 800px;	+	#navbar {
−	height: 300px;	+	border: none;
−	text-align: center;	+	border: 0px;
−	position: fixed;	+	margin: 0px;
−	top: 80px;	+	padding: 0px;
		+	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 {
−	#TopBar #TopLvlNavLink {	+	background: #50b738;
−	display: none;	+	height: 50px;
		+	list-style: none;
		+	margin: 0;
		+	padding: 0;
		+	-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 {
−	#TopBar ul {	+	float: left;
−	background: #50b738;	+	padding: 0px 0px 0px 15px;
−	list-style-type: none;	+
−	position: relative;	+
−	display: inline-table;	+
−	padding: 0;	+
−	margin: 0;	+
	}		}
−		+	#navbar li a {
−	#TopBar ul:after {	+	color: #000;
−	content: "";	+	display: block;
−	clear: both;	+	font-weight: normal;
−	display: block;	+	line-height: 50px;
		+	margin: 0px;
		+	padding: 0px 25px;
		+	text-align: center;
		+	text-decoration: none;
	}		}
−		+	#navbar li a:hover {
−	#TopBar li {	+	background: #7bc470;
−	float: left;	+	color: #FFF;
−	width: 120px;	+	text-decoration: none;
−	text-align: center;	+	-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
−		+	-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 {
−	#TopBar li:hover > a {	+	background: #50b738;
−	//font-weight: bold;	+	color: #FFF;
−	font-family: Arial;	+	text-decoration: none;
−	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 {
−	#TopBar a {	+	display: none;
−	display: block;	+	height: auto;
−	width: 100%;	+	padding: 0px;
−	height: 100%;	+	margin: 0px;
−	padding: 5px 0;	+	border: 0px;
−	color: #FFF;	+	position: absolute;
−	//color: #7bc470;	+	width: 200px;
−	text-decoration: none;	+	z-index: 200;
−	font: 16px "Arial;",	+
−	text-align: center;	+
	}		}
−		+	#navbar li:hover ul {
−	#TopBar > #TopLvlNav  > li > a {	+	display: block;
−	padding: 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 5px;
−	position: absolute;
−	top: 95%;
−	z-index: 10;
−	margin-left: -10px;
−	width: 100px;
	}		}
−		+	#navbar li:hover li a {
−	#TopBar ul li:hover > ul {	+	background: none;
−	display: block;	+
−	font: 16px "Arial;",	+
	}		}
−		+	#navbar li ul a {
−	#TopBar ul ul li {	+	display: block;
−	float: none;	+	height: 50px;
−	position: relative;	+	font-size: 12px;
		+	font-style: normal;
		+	margin: 0px;
		+	padding: 0px 10px 0px 15px;
		+	text-align: left;
	}		}
−		+	#navbar li ul a:hover,
−	#TopBar ul ul a {	+	#navbar li ul li:hover a {
−	font-size: 16px;	+	border: 0px;
−	font-family: Arial;	+	color: #FFF;
−	}	+	text-decoration: none;
−		+	background: #cc6600;
−	#TopBar ul ul ul {	+	-webkit-box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);
−	position: absolute;	+	-moz-box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);
−	left: 100%;	+	box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);
−	top: 0;	+
−	margin: 0;	+
−	}	+
−		+
−	#TopBar #LogoItem {	+
−	padding: 5px 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: 100px;	+
−	padding: 0;	+
−	background: green;	+
−	text-align: center;	+
−	}	+
−		+
−	#TopBarCollapse li:hover {	+
−	background: pink;	+
−	}	+
−		+
−	#TopBarCollapse a {	+
−	color: #FFFFFF;	+
−	display: block;	+
−	text-decoration: none;	+
−	padding: 5px 5px;	+
−	}	+
−		+
−	.contentContainer {	+
−	width: 900px;	+
−	background-color: #fff;	+
−	margin: 0px -5px;	+
−	padding: 0px 8px;	+
	}		}

---

Revision as of 14:11, 20 October 2017

/* #F93 */ /* #C60 */

1. navbar {

 border: none;
 border: 0px;
 margin: 0px;
 padding: 0px;
 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;

}

1. navbar ul {

 background: #50b738;
 height: 50px;
 list-style: none;
 margin: 0;
 padding: 0;
 -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);

}

1. navbar li {

 float: left;
 padding: 0px 0px 0px 15px;

}

1. navbar li a {

 color: #000;
 display: block;
 font-weight: normal;
 line-height: 50px;
 margin: 0px;
 padding: 0px 25px;
 text-align: center;
 text-decoration: none;

}

1. navbar li a:hover {

 background: #7bc470;
 color: #FFF;
 text-decoration: none;
 -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.3);
 -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);

}

1. navbar ul li:hover a {

 background: #50b738;
 color: #FFF;
 text-decoration: none;

}

1. navbar li ul {

 display: none;
 height: auto;
 padding: 0px;
 margin: 0px;
 border: 0px;
 position: absolute;
 width: 200px;
 z-index: 200;

}

1. navbar li:hover ul {

 display: block;

}

1. 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*/

}

1. navbar li:hover li a {

 background: none;

}

1. navbar li ul a {

 display: block;
 height: 50px;
 font-size: 12px;
 font-style: normal;
 margin: 0px;
 padding: 0px 10px 0px 15px;
 text-align: left;

}

1. navbar li ul a:hover,
2. navbar li ul li:hover a {

 border: 0px;
 color: #FFF;
 text-decoration: none;
 background: #cc6600;
 -webkit-box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);
 -moz-box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);
 box-shadow: inset 0px 0px 7px 2px white(0, 0, 0, 0.3);

}