General fixes in the main menu.

Sidney Ricardo
1 parent 0aa857a5
Showing 4 changed files with 282 additions and 17 deletions Show diff stats
cabecalho-cinza-theme.css
dropline_menu.css
header.html.erb
style.css
@@ -401,12 +401,78 @@ color:#000000;
 }
+.action-account-signup .no-boxes {
+    margin-top: 20px;
+}
+
+
+
+.portalservicos-item div {
+    display: none;
+    position: absolute;
+     background-color: red;
+}
+
+.portalservicos-item:hover div {
+    display: inline-block;
+    float: left;
+    width: 960px;
+    top: 25px;
+    left: 0;
+    background-color: blue;
+}
+
+.portalservicos-submenu:hover {
+    display: inline-block;
+    float: left;
+    width: 960px;
+    top: 25px;
+    left: 0;
+    background-color: green;
+}
+
+/* Bubble Float Bottom */
+.bubble-float-bottom {
+  display: inline-block;
+  position: relative;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+.bubble-float-bottom:before {
+  position: absolute;
+  z-index: -1;
+  content: '';
+  left: calc(50% - 10px);
+  bottom: 0;
+  border-style: solid;
+  border-width: 10px 10px 0 10px;
+  border-color: #e1e1e1 transparent transparent transparent;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: bottom;
+  transition-property: bottom;
+}
+.bubble-float-bottom:hover, .bubble-float-bottom:focus, .bubble-float-bottom:active {
+  -webkit-transform: translateY(-5px) translateZ(0);
+  transform: translateY(-5px) translateZ(0);
+}
+.bubble-float-bottom:hover:before, .bubble-float-bottom:focus:before, .bubble-float-bottom:active:before {
+  bottom: -10px;
+}
+
+
+
 /****************** FIM cabecalho ******************/
 /************* Bar Psocial Style - Menu Horizontal**************/
 #user{
-  top: -45px;
+  top: -53px;
   font-size: 12px;
   /*right: 10px;*/
 }
@@ -0,0 +1,163 @@
+/*
+Techonolgy Quest;
+
+creating a horizontal Dropline menu is simple.
+Following id will define the dimensions for the menu, margin, padding width, height.
+For the drop line menu the position is added in this class.
+Its not necessary to add position
+*/
+ #menucontainer {
+    margin: 0px;
+    padding: 0px;
+    width: 100%;
+    height: 30px;
+    position: relative;
+    
+    background-color: rgb(236,237,241);
+    
+}
+#menucontainer ul {
+    margin: 0px;
+    padding: 0px;
+    list-style: none;
+    width: 980px;
+    height:30px;
+    margin: 0 auto;
+}
+/* Following selector will define the style for individual parent menu. The following style gives them a look when the menus are not selected.
+note that the position proerty is not set.
+*/
+ #menucontainer ul li.parent_menu {
+    list-style: none;
+    margin: 0px;
+    padding: 6px;
+    /*background-color:#69A9B1;*/
+    display: inline;
+    width: 100%;
+    height: 100%;
+    /*border-right: 1px solid #03316f;*/
+    
+    background-color: rgb(236,237,241);
+}
+/* 
+Style for the anchor tag defined in the parent. 
+*/
+ #menucontainer ul li.parent_menu a {
+    margin-left: 10px;
+    padding-left: 0px;
+    margin-right: 15px;
+    padding-right: 10px;
+    background-color:transparent;
+    display: inline;
+    text-decoration: none;
+    /*font-family:"Times New Roman", "Arabic";*/
+    
+    
+    line-height: 30px;
+    
+    /*border-right: 1px solid #03316f;*/
+    color: rgb(96,96,96);
+    font-size: 12px;
+    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+}
+/* The hover effect is defined using the below selectors
+For the background-color opacity is used to create a semi-transperant look as a hover effect
+*/
+ #menucontainer ul li.parent_menu:hover {
+    list-style: none;
+    /*margin: 0px;
+    padding: 0px;*/
+    opacity: 0.8;
+    background-color:#4E5155;
+    display: inline;
+    /*border-right:3px solid #6A91A8;*/
+}
+/*
+The following class will define the style for anchor tag in the 
+
+*/
+ #menucontainer ul li.parent_menu:hover a {
+    list-style: none;
+    /*margin-left: 10px;
+    padding-left: 10px;
+    margin-right: 10px;
+    padding-right: 10px;*/
+    background-color:transparent;
+    display: inline;
+    text-decoration: none;
+    font-size: 12px;
+    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+    color: #FFFFFF;
+    line-height: 30px;
+}
+/***************SUB MENU***********************/
+
+/*
+Following class will hide the sub menu when the mouse is not hovering.
+*/
+ #menucontainer ul li.parent_menu ul {
+    margin: 0px;
+    padding: 0px;
+    list-style: none;
+    display:none;
+    position: absolute;
+    height: 0;
+}
+/*
+Following class display hide the sub menu when the mouse is not hovering.
+Note: for this style of the menu position is set to 'absolute'
+
+*/
+ #menucontainer ul li.parent_menu:hover ul {
+    margin: -5px 0 0 0;
+    padding: 0px;
+    list-style: none;
+    display:block;
+    position: absolute;
+    height: auto;
+    width:100%;
+    left: 0px;
+    
+    background-color:#2e2e2e;
+}
+/* Following selector will define the style for individual sub menu. The following style gives them a look when the menus are not selected.
+note that the position proerty is not set and dispaly is block.
+Also the float property is set left; This will keep the menu in a single line.
+*/
+ #menucontainer ul li.parent_menu:hover ul li.child_menu {
+    list-style: none;
+    margin-left: 10px;
+    padding-left: 10px;
+    margin-right: 10px;
+    padding-right: 10px;
+    display: block;
+    float: left;
+}
+/*
+Following class will define the style for the anchor tag of the submenu/child menu
+*/
+ #menucontainer ul li.parent_menu:hover li.child_menu a {
+    padding-left: 10px;
+    margin-right: 10px;
+    padding-right: 10px;
+    background-color:transparent;
+    display: inline;
+    text-decoration: none;
+    font-size: 12px;
+    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+    color: #FFFFFF;
+    line-height: 33px;
+}
+#menucontainer ul li.parent_menu:hover li.child_menu a:hover {
+    margin-left: 10px;
+    padding-left: 10px;
+    margin-right: 10px;
+    padding-right: 10px;
+    background-color:transparent;
+    display: inline;
+    text-decoration: none;
+    font-size: 12px;
+    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
+    color: #FFFFFF;
+    line-height: 33px;
+}
@@ -117,22 +117,45 @@
   </div>
 </div>
-<div id="barra-psocial">
-	<div id="navbar">
-	<nav id="navigation-colab"class="menu-servicos pull-right" role="navigation">
-	<ul class="nav navbar-nav">
-	<li class="portalservicos-item"><a href="/">Software Público</a></li>
-	<li class="portalservicos-item"><a href="/">Mercado Público</a></li>
-	<li class="portalservicos-item"><a href="/" >Comunidades</a></li>
-	<li class="portalservicos-item"><a href="/">Usuário</a></li>
-	</ul>
-	</nav>
-	</div>
-  <div id="categories_menu">
+
+<div id="menucontainer">
+    <ul id="hmenu">
+        <li class="parent_menu"><a href="#">Software Público</a>
+
+        </li>
+        <li class="parent_menu"><a href="#">Mercado Público</a>
+
+        </li>
+        <li class="parent_menu"><a href="#">Comunidades</a>
+
+            <ul>
+                <li class="child_menu"><a href="#">Comunidades de Software</a>
+
+                </li>
+              <li class="child_menu"><a href="#">Universidades</a>
+                </li>
+            </ul>
+        </li>
+        <li class="parent_menu"><a href="#">Usuário</a>
+
+        </li>
+
+    </ul>
+    
+
+</div>
+
+   <div id="categories_menu">
     <%= theme_include 'categories' %>
   </div>
-  <!--<div id="participa-languages">
+
+  <!--
+<div id="barra-psocial">
+
+
+<div id="participa-languages">
     <a href="?lang=pt" class="flag-pt" title="Português"><span>Português</span></a>
     <a href="?lang=en" class="flag-en" title="English"><span>English</span></a>
-  </div> -->
-</div>
+  </div> 
+</div>-->
+
@@ -10,8 +10,13 @@
 /****************** FIM cabecalho azul ******************/
 /****************** cadastro ********************/
 @import url(cadastro.css);
+
+/****************** Dropline Menu ********************/
+@import url(dropline_menu.css);
+
 /****************** FIM cabecalho azul ****************/
+
 @import url(../../icons/tango/style.css);
 @font-face {
@@ -913,6 +918,14 @@ ul.profile-list .common-profile-list-block {
 }
+#site-title {
+position: absolute;
+left: 8px;
+top: -160px;
+height: 78px;
+width: 480px;
+display: none;
+}
 /****************** FIM Estilos basicos ******************/
@@ -920,7 +933,7 @@ ul.profile-list .common-profile-list-block {
 #content {
     left: -480px;
     margin-left: 50%;
-    margin-top: 0;
+    margin-top: 30px;
     position: relative;
     width: 960px;
 }
	@@ -401,12 +401,78 @@ color:#000000;		@@ -401,12 +401,78 @@ color:#000000;
401	}	401	}
402		402
403		403
		404	+.action-account-signup .no-boxes {
		405	+ margin-top: 20px;
		406	+}
		407	+
		408	+
		409	+
		410	+.portalservicos-item div {
		411	+ display: none;
		412	+ position: absolute;
		413	+ background-color: red;
		414	+}
		415	+
		416	+.portalservicos-item:hover div {
		417	+ display: inline-block;
		418	+ float: left;
		419	+ width: 960px;
		420	+ top: 25px;
		421	+ left: 0;
		422	+ background-color: blue;
		423	+}
		424	+
		425	+.portalservicos-submenu:hover {
		426	+ display: inline-block;
		427	+ float: left;
		428	+ width: 960px;
		429	+ top: 25px;
		430	+ left: 0;
		431	+ background-color: green;
		432	+}
		433	+
		434	+/* Bubble Float Bottom */
		435	+.bubble-float-bottom {
		436	+ display: inline-block;
		437	+ position: relative;
		438	+ -webkit-transition-duration: 0.3s;
		439	+ transition-duration: 0.3s;
		440	+ -webkit-transition-property: transform;
		441	+ transition-property: transform;
		442	+ -webkit-transform: translateZ(0);
		443	+ transform: translateZ(0);
		444	+ box-shadow: 0 0 1px rgba(0, 0, 0, 0);
		445	+}
		446	+.bubble-float-bottom:before {
		447	+ position: absolute;
		448	+ z-index: -1;
		449	+ content: '';
		450	+ left: calc(50% - 10px);
		451	+ bottom: 0;
		452	+ border-style: solid;
		453	+ border-width: 10px 10px 0 10px;
		454	+ border-color: #e1e1e1 transparent transparent transparent;
		455	+ -webkit-transition-duration: 0.3s;
		456	+ transition-duration: 0.3s;
		457	+ -webkit-transition-property: bottom;
		458	+ transition-property: bottom;
		459	+}
		460	+.bubble-float-bottom:hover, .bubble-float-bottom:focus, .bubble-float-bottom:active {
		461	+ -webkit-transform: translateY(-5px) translateZ(0);
		462	+ transform: translateY(-5px) translateZ(0);
		463	+}
		464	+.bubble-float-bottom:hover:before, .bubble-float-bottom:focus:before, .bubble-float-bottom:active:before {
		465	+ bottom: -10px;
		466	+}
		467	+
		468	+
		469	+
404		470
405	/**************** FIM cabecalho ****************/	471	/**************** FIM cabecalho ****************/
406		472
407	/*********** Bar Psocial Style - Menu Horizontal************/	473	/*********** Bar Psocial Style - Menu Horizontal************/
408	#user{	474	#user{
409	- top: -45px;	475	+ top: -53px;
410	font-size: 12px;	476	font-size: 12px;
411	/right: 10px;/	477	/right: 10px;/
412	}	478	}
@@ -0,0 +1,163 @@		@@ -0,0 +1,163 @@
	1	+/*
	2	+Techonolgy Quest;
	3	+
	4	+creating a horizontal Dropline menu is simple.
	5	+Following id will define the dimensions for the menu, margin, padding width, height.
	6	+For the drop line menu the position is added in this class.
	7	+Its not necessary to add position
	8	+*/
	9	+ #menucontainer {
	10	+ margin: 0px;
	11	+ padding: 0px;
	12	+ width: 100%;
	13	+ height: 30px;
	14	+ position: relative;
	15	+
	16	+ background-color: rgb(236,237,241);
	17	+
	18	+}
	19	+#menucontainer ul {
	20	+ margin: 0px;
	21	+ padding: 0px;
	22	+ list-style: none;
	23	+ width: 980px;
	24	+ height:30px;
	25	+ margin: 0 auto;
	26	+}
	27	+/* Following selector will define the style for individual parent menu. The following style gives them a look when the menus are not selected.
	28	+note that the position proerty is not set.
	29	+*/
	30	+ #menucontainer ul li.parent_menu {
	31	+ list-style: none;
	32	+ margin: 0px;
	33	+ padding: 6px;
	34	+ /background-color:#69A9B1;/
	35	+ display: inline;
	36	+ width: 100%;
	37	+ height: 100%;
	38	+ /border-right: 1px solid #03316f;/
	39	+
	40	+ background-color: rgb(236,237,241);
	41	+}
	42	+/*
	43	+Style for the anchor tag defined in the parent.
	44	+*/
	45	+ #menucontainer ul li.parent_menu a {
	46	+ margin-left: 10px;
	47	+ padding-left: 0px;
	48	+ margin-right: 15px;
	49	+ padding-right: 10px;
	50	+ background-color:transparent;
	51	+ display: inline;
	52	+ text-decoration: none;
	53	+ /font-family:"Times New Roman", "Arabic";/
	54	+
	55	+
	56	+ line-height: 30px;
	57	+
	58	+ /border-right: 1px solid #03316f;/
	59	+ color: rgb(96,96,96);
	60	+ font-size: 12px;
	61	+ font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	62	+}
	63	+/* The hover effect is defined using the below selectors
	64	+For the background-color opacity is used to create a semi-transperant look as a hover effect
	65	+*/
	66	+ #menucontainer ul li.parent_menu:hover {
	67	+ list-style: none;
	68	+ /*margin: 0px;
	69	+ padding: 0px;*/
	70	+ opacity: 0.8;
	71	+ background-color:#4E5155;
	72	+ display: inline;
	73	+ /border-right:3px solid #6A91A8;/
	74	+}
	75	+/*
	76	+The following class will define the style for anchor tag in the
	77	+
	78	+*/
	79	+ #menucontainer ul li.parent_menu:hover a {
	80	+ list-style: none;
	81	+ /*margin-left: 10px;
	82	+ padding-left: 10px;
	83	+ margin-right: 10px;
	84	+ padding-right: 10px;*/
	85	+ background-color:transparent;
	86	+ display: inline;
	87	+ text-decoration: none;
	88	+ font-size: 12px;
	89	+ font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	90	+ color: #FFFFFF;
	91	+ line-height: 30px;
	92	+}
	93	+/*************SUB MENU*********************/
	94	+
	95	+/*
	96	+Following class will hide the sub menu when the mouse is not hovering.
	97	+*/
	98	+ #menucontainer ul li.parent_menu ul {
	99	+ margin: 0px;
	100	+ padding: 0px;
	101	+ list-style: none;
	102	+ display:none;
	103	+ position: absolute;
	104	+ height: 0;
	105	+}
	106	+/*
	107	+Following class display hide the sub menu when the mouse is not hovering.
	108	+Note: for this style of the menu position is set to 'absolute'
	109	+
	110	+*/
	111	+ #menucontainer ul li.parent_menu:hover ul {
	112	+ margin: -5px 0 0 0;
	113	+ padding: 0px;
	114	+ list-style: none;
	115	+ display:block;
	116	+ position: absolute;
	117	+ height: auto;
	118	+ width:100%;
	119	+ left: 0px;
	120	+
	121	+ background-color:#2e2e2e;
	122	+}
	123	+/* Following selector will define the style for individual sub menu. The following style gives them a look when the menus are not selected.
	124	+note that the position proerty is not set and dispaly is block.
	125	+Also the float property is set left; This will keep the menu in a single line.
	126	+*/
	127	+ #menucontainer ul li.parent_menu:hover ul li.child_menu {
	128	+ list-style: none;
	129	+ margin-left: 10px;
	130	+ padding-left: 10px;
	131	+ margin-right: 10px;
	132	+ padding-right: 10px;
	133	+ display: block;
	134	+ float: left;
	135	+}
	136	+/*
	137	+Following class will define the style for the anchor tag of the submenu/child menu
	138	+*/
	139	+ #menucontainer ul li.parent_menu:hover li.child_menu a {
	140	+ padding-left: 10px;
	141	+ margin-right: 10px;
	142	+ padding-right: 10px;
	143	+ background-color:transparent;
	144	+ display: inline;
	145	+ text-decoration: none;
	146	+ font-size: 12px;
	147	+ font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	148	+ color: #FFFFFF;
	149	+ line-height: 33px;
	150	+}
	151	+#menucontainer ul li.parent_menu:hover li.child_menu a:hover {
	152	+ margin-left: 10px;
	153	+ padding-left: 10px;
	154	+ margin-right: 10px;
	155	+ padding-right: 10px;
	156	+ background-color:transparent;
	157	+ display: inline;
	158	+ text-decoration: none;
	159	+ font-size: 12px;
	160	+ font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	161	+ color: #FFFFFF;
	162	+ line-height: 33px;
	163	+}
	@@ -117,22 +117,45 @@		@@ -117,22 +117,45 @@
117	</div>	117	</div>
118	</div>	118	</div>
119		119
120	-<div id="barra-psocial">
121	- <div id="navbar">
122	- <nav id="navigation-colab"class="menu-servicos pull-right" role="navigation">
123	- <ul class="nav navbar-nav">
124	- <li class="portalservicos-item"><a href="/">Software Público</a></li>
125	- <li class="portalservicos-item"><a href="/">Mercado Público</a></li>
126	- <li class="portalservicos-item"><a href="/" >Comunidades</a></li>
127	- <li class="portalservicos-item"><a href="/">Usuário</a></li>
128	- </ul>
129	- </nav>
130	- </div>
131	- <div id="categories_menu">	120	+
		121	+<div id="menucontainer">
		122	+ <ul id="hmenu">
		123	+ <li class="parent_menu"><a href="#">Software Público</a>
		124	+
		125	+ </li>
		126	+ <li class="parent_menu"><a href="#">Mercado Público</a>
		127	+
		128	+ </li>
		129	+ <li class="parent_menu"><a href="#">Comunidades</a>
		130	+
		131	+ <ul>
		132	+ <li class="child_menu"><a href="#">Comunidades de Software</a>
		133	+
		134	+ </li>
		135	+ <li class="child_menu"><a href="#">Universidades</a>
		136	+ </li>
		137	+ </ul>
		138	+ </li>
		139	+ <li class="parent_menu"><a href="#">Usuário</a>
		140	+
		141	+ </li>
		142	+
		143	+ </ul>
		144	+
		145	+
		146	+</div>
		147	+
		148	+ <div id="categories_menu">
132	<%= theme_include 'categories' %>	149	<%= theme_include 'categories' %>
133	</div>	150	</div>
134	- <!--<div id="participa-languages">	151	+
		152	+ <!--
		153	+<div id="barra-psocial">
		154	+
		155	+
		156	+<div id="participa-languages">
135	<a href="?lang=pt" class="flag-pt" title="Português"><span>Português</span></a>	157	<a href="?lang=pt" class="flag-pt" title="Português"><span>Português</span></a>
136	<a href="?lang=en" class="flag-en" title="English"><span>English</span></a>	158	<a href="?lang=en" class="flag-en" title="English"><span>English</span></a>
137	- </div> -->
138	-</div>	159	+ </div>
		160	+</div>-->
		161	+