diff --git a/_templates/mirantis/layout.html b/_templates/mirantis/layout.html
index 9c586d811..e13ef3b40 100644
--- a/_templates/mirantis/layout.html
+++ b/_templates/mirantis/layout.html
@@ -21,7 +21,7 @@
{# add script file to instrument collapsable sections and other features #}
{% set script_files = script_files + ['_static/jquery.cookie.js',
- '_static/cloud.js'] %}
+ '_static/cloud.js', '_static/menu.js'] %}
{# add font stylesheets #}
{% set css_files = css_files + [theme_fontcssurl] %}
@@ -76,6 +76,59 @@ if(ga_enabled){
{%- endif %}
{%- endblock %}
+{% block header %}
+
+{% endblock %}
+
{% block footer -%}
{{ super() }}
{%- if theme_googleanalytics_id -%}
diff --git a/_templates/mirantis/static/menu.css b/_templates/mirantis/static/menu.css
new file mode 100644
index 000000000..932b7e11b
--- /dev/null
+++ b/_templates/mirantis/static/menu.css
@@ -0,0 +1,74 @@
+/* For the MAIN MENU */
+#main-menu {
+ height:47px;
+ margin-top:20px;
+ text-align: right;
+ position:relative;
+ margin-right: -7px;
+}
+a.glink, a.glinksm {
+ color: black;
+ font-family: 'PT Sans Narrow','Arial Narrow',arial,sans-serif;
+ font-size: 19px;
+ padding: 5px 9px 9px 9px;
+ white-space: nowrap;
+ text-decoration:none;
+ background-color: #ffffff;
+
+}
+
+a.glink:hover {
+color:#d3301a;
+background-color: #eaeff3; border-radius: 3px;
+}
+
+a.glinksm:hover {
+ background: #e74c3c;
+ color: white;
+ box-shadow: 0px 2px 0px #cb4335;
+ text-shadow: none;
+}
+
+.subglobalNav {
+ color: black;
+ position:absolute;
+ font-family: 'PT Sans Narrow','Arial Narrow',arial,sans-serif;
+ font-size: 14px;
+ white-space: nowrap;
+ text-decoration:none;
+ //left:0px;
+ padding-top: 5px;
+ line-height: 30px;
+ min-height: 65px;
+ z-index: 1;
+}
+
+.subglobal_vis {background: #f4f7fa; border-radius: 3px;}
+
+
+.subglobalNav a{
+ color: black;
+ text-decoration:none;
+ padding: 3px 7px 3px 7px;
+ margin:0 6px 0 6px;
+}
+.subglobalNav a:hover {
+ color: #fff;
+ background: #CB2E19;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ margin:0 6px 0 6px;
+ box-shadow: inset 1px 1px 1px #b12716;
+ /*text-shadow: -1px -1px 0px #7F2114;*/
+}
+a.act {
+ color:#d3301a !important;
+}
+a.act:hover {
+ color: #fff !important;
+ background: #CB2E19;
+}
+a.active {
+ color:#d3301a;
+}
+/* End of MAIN MENU */
diff --git a/_templates/mirantis/static/menu.js b/_templates/mirantis/static/menu.js
new file mode 100644
index 000000000..597032d46
--- /dev/null
+++ b/_templates/mirantis/static/menu.js
@@ -0,0 +1,80 @@
+jQuery(document).ready(function(){
+/*Start DocumentReady*/
+
+ // Set "act" classes for subnavigation
+ var url=document.location.href;
+ jQuery.each(jQuery(".subglobalNav a"),function(){
+ if(this.href==url){
+ jQuery(this).addClass('act');
+ };
+ });
+
+ // Set "active" classes for navigation items
+ var url=location.href;
+ if(url.split('/')[3]!=0){url=url.split('/')[3];
+ jQuery.each(jQuery("#globalLink a[href*='\\/"+url+"']"),function(){
+ jQuery(this).addClass('active');
+ var id = jQuery(this).attr('name').substr(2,1);
+ jQuery("#subglobal"+id).addClass('currentSubNav');
+ jQuery("#gl"+id).css({ "background-color": "#f4f7fa"});
+ });};
+
+ //Menu Initalization on start
+ jQuery(".currentSubNav").css({'visibility': 'visible', opacity: 0.0});
+
+ //Menu subitems showing "ommousehover"
+ jQuery(".glink").mouseover(function(){
+ var id = jQuery(this).attr('name').substr(2,1);
+ jQuery("#gl"+id).css({ "background-color": "#f4f7fa"});
+ if(jQuery(".currentSubNav").attr('id') == "subglobal"+id) {
+ jQuery(".subglobalNav").each(function(){
+ if(!jQuery(this).hasClass("currentSubNav")) jQuery(this).css('visibility', 'hidden');
+ });
+ } else {
+ jQuery(".subglobalNav").css('visibility', 'hidden');
+ jQuery("#subglobal"+id).css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 100);
+
+ }
+ }).mouseout(function(){
+ var id = jQuery(this).attr('name').substr(2,1);
+ jQuery(".glink").css({ "background-color": "#FFFFFF"});
+ if(jQuery(".currentSubNav").attr('id') == "subglobal"+id) {
+ jQuery("#gl"+id).css({ "background-color": "#f4f7fa"});
+ } else {
+ jQuery("#subglobal"+id).css({visibility: "hidden"});
+ jQuery(".currentSubNav").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 100);
+ jQuery("#subglobal"+id).mouseover(function(){
+ jQuery("#subglobal"+id).css({visibility: "visible"});
+ jQuery("#gl"+id).css({ "background-color": "#f4f7fa"});
+ jQuery(".currentSubNav").css({visibility: "hidden"});
+ }).mouseout(function(){
+ jQuery("#subglobal"+id).css({visibility: "hidden"});
+ jQuery("#gl"+id).css({ "background-color": "#ffffff"});
+ jQuery(".currentSubNav").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0}, 100);
+ });
+
+ }
+ });
+
+/*End DocumentReady*/
+});
+
+jQuery(window).load(function(){
+ // Set menu margins
+ var headerWidth = jQuery("#masthead").width();
+ var navWidth = 0;
+ jQuery(".glink").each(function(){
+ navWidth += jQuery(this).outerWidth();
+ });
+
+ jQuery(".subglobalNav").each(function(index){
+ var id = parseInt(jQuery(this).attr('id').substr(9,1));
+ var width = jQuery(this).width();
+ var centerPosition = headerWidth - (jQuery("#gl" + id).position().left + jQuery("#gl" + id).outerWidth()/2);
+ var margin = parseInt(centerPosition - width/2);
+ var margin = jQuery("#gl" + id).position().left - 5;
+
+ if (margin < 0) margin = 0;
+ jQuery(this).css({marginLeft: margin,opacity: 1.0})
+ });
+});
diff --git a/_templates/mirantis/static/mirantis.css_t b/_templates/mirantis/static/mirantis.css_t
index f543ace51..84bd7958e 100644
--- a/_templates/mirantis/static/mirantis.css_t
+++ b/_templates/mirantis/static/mirantis.css_t
@@ -12,6 +12,7 @@
@import url("cloud.css");
@import url("mirantis_style.css");
+@import url("menu.css");
.highlight .hll {
background-color: #C0FF7C !important;
@@ -111,4 +112,4 @@ div.sphinxsidebar #searchbox input[type="text"] {
div.sphinxsidebar .searchtip
{
color: rgba(0,0,0,.5);
-}
\ No newline at end of file
+}
diff --git a/_templates/mirantis/static/mirantis_style.css b/_templates/mirantis/static/mirantis_style.css
index 6c0474688..0f1a5d234 100644
--- a/_templates/mirantis/static/mirantis_style.css
+++ b/_templates/mirantis/static/mirantis_style.css
@@ -413,7 +413,7 @@ a.glink:hover {
font-size: 14px;
white-space: nowrap;
text-decoration: none;
- right: 0px;
+ left: 0px;
padding-top: 10px;
}
@@ -502,4 +502,4 @@ a.active {
tt.literal
{
border: none;
-}
\ No newline at end of file
+}