From 0430bef5b336ddee3627dfc67fe01469afa5cd04 Mon Sep 17 00:00:00 2001 From: Sidney Ricardo Medeiros Date: Fri, 12 Sep 2014 16:30:35 -0300 Subject: [PATCH] General fixes in the main menu. --- cabecalho-cinza-theme.css | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++- dropline_menu.css | 163 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ header.html.erb | 53 ++++++++++++++++++++++++++++++++++++++--------------- style.css | 15 ++++++++++++++- 4 files changed, 282 insertions(+), 17 deletions(-) create mode 100644 dropline_menu.css diff --git a/cabecalho-cinza-theme.css b/cabecalho-cinza-theme.css index 8eadba1..91e33a5 100644 --- a/cabecalho-cinza-theme.css +++ b/cabecalho-cinza-theme.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;*/ } diff --git a/dropline_menu.css b/dropline_menu.css new file mode 100644 index 0000000..35848c2 --- /dev/null +++ b/dropline_menu.css @@ -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; +} diff --git a/header.html.erb b/header.html.erb index 0ee1d6a..bca6b2f 100644 --- a/header.html.erb +++ b/header.html.erb @@ -117,22 +117,45 @@ -
- -
+ + + +
<%= theme_include 'categories' %>
- -
+
+--> + diff --git a/style.css b/style.css index 4155f7e..9afb606 100644 --- a/style.css +++ b/style.css @@ -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; } -- libgit2 0.21.2