Download as
Browse Code »

Commit 0430bef5b336ddee3627dfc67fe01469afa5cd04

Authored by Sidney Ricardo
1 parent 0aa857a5
Exists in master and in 12 other branches adding_css_from_plugin, comments-opacity, design_template, fix_catalog_classes, fix_javascript, fix_text_display_content, format_highlight_block_#85, news_page_css, page_catalog, restructuring_css, stable, tooltips

General fixes in the main menu.

Showing 4 changed files with 282 additions and 17 deletions   Show diff stats
cabecalho-cinza-theme.css
  Diff comments   View file @0430bef
... ... @@ -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 471 /****************** FIM cabecalho ******************/
406 472  
407 473 /************* Bar Psocial Style - Menu Horizontal**************/
408 474 #user{
409   - top: -45px;
  475 + top: -53px;
410 476 font-size: 12px;
411 477 /*right: 10px;*/
412 478 }
... ...
dropline_menu.css 0 → 100644
  Diff comments   View file @0430bef
... ... @@ -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 +}
... ...
header.html.erb
  Diff comments   View file @0430bef
... ... @@ -117,22 +117,45 @@
117 117 </div>
118 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 149 <%= theme_include 'categories' %>
133 150 </div>
134   - <!--<div id="participa-languages">
  151 +
  152 + <!--
  153 +<div id="barra-psocial">
  154 +
  155 +
  156 +<div id="participa-languages">
135 157 <a href="?lang=pt" class="flag-pt" title="Português"><span>Português</span></a>
136 158 <a href="?lang=en" class="flag-en" title="English"><span>English</span></a>
137   - </div> -->
138   -</div>
  159 + </div>
  160 +</div>-->
  161 +
... ...
style.css
  Diff comments   View file @0430bef
... ... @@ -10,8 +10,13 @@
10 10 /****************** FIM cabecalho azul ******************/
11 11 /****************** cadastro ********************/
12 12 @import url(cadastro.css);
  13 +
  14 +/****************** Dropline Menu ********************/
  15 +@import url(dropline_menu.css);
  16 +
13 17 /****************** FIM cabecalho azul ****************/
14 18  
  19 +
15 20 @import url(../../icons/tango/style.css);
16 21  
17 22 @font-face {
... ... @@ -913,6 +918,14 @@ ul.profile-list .common-profile-list-block {
913 918 }
914 919  
915 920  
  921 +#site-title {
  922 +position: absolute;
  923 +left: 8px;
  924 +top: -160px;
  925 +height: 78px;
  926 +width: 480px;
  927 +display: none;
  928 +}
916 929  
917 930 /****************** FIM Estilos basicos ******************/
918 931  
... ... @@ -920,7 +933,7 @@ ul.profile-list .common-profile-list-block {
920 933 #content {
921 934 left: -480px;
922 935 margin-left: 50%;
923   - margin-top: 0;
  936 + margin-top: 30px;
924 937 position: relative;
925 938 width: 960px;
926 939 }
... ...