Added menu
This commit is contained in:
parent
51c761ac7b
commit
9fa868edce
@ -21,7 +21,7 @@
|
|||||||
|
|
||||||
{# add script file to instrument collapsable sections and other features #}
|
{# add script file to instrument collapsable sections and other features #}
|
||||||
{% set script_files = script_files + ['_static/jquery.cookie.js',
|
{% set script_files = script_files + ['_static/jquery.cookie.js',
|
||||||
'_static/cloud.js'] %}
|
'_static/cloud.js', '_static/menu.js'] %}
|
||||||
|
|
||||||
{# add font stylesheets #}
|
{# add font stylesheets #}
|
||||||
{% set css_files = css_files + [theme_fontcssurl] %}
|
{% set css_files = css_files + [theme_fontcssurl] %}
|
||||||
@ -76,6 +76,59 @@ if(ga_enabled){
|
|||||||
{%- endif %}
|
{%- endif %}
|
||||||
{%- endblock %}
|
{%- endblock %}
|
||||||
|
|
||||||
|
{% block header %}
|
||||||
|
<div id="masthead">
|
||||||
|
<div id="globalNav">
|
||||||
|
<div id="globalLink">
|
||||||
|
<a href="http://software.mirantis.com/" id="gl1" class="glink active" name="gl1">Software</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack-services/" id="gl2" class="glink" name="gl2">Services</a>
|
||||||
|
<a href="http://training.mirantis.com" id="gl3" class="glink" name="gl3">Training</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack/" id="gl4" class="glink" name="gl4">OpenStack</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack-use-cases/" id="gl5" class="glink" name="gl5">Use Cases</a>
|
||||||
|
<a href="http://www.mirantis.com/company/" id="gl6" class="glink" name="gl6">Company</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="subglobal1" class="subglobalNav" style="visibility: hidden;">
|
||||||
|
<div class="subglobal_vis">
|
||||||
|
<a href="http://software.mirantis.com/">Downloads</a>
|
||||||
|
<a href="http://software.mirantis.com/core-openstack/">Core OpenStack</a>
|
||||||
|
<a href="http://software.mirantis.com/key-related-openstack-projects/">Key Related Projects</a>
|
||||||
|
<a href="http://software.mirantis.com/plugins-and-drivers/">Plugins & Drivers</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="subglobal2" class="subglobalNav" style="visibility: hidden;">
|
||||||
|
<div class="subglobal_vis">
|
||||||
|
<a href="http://www.mirantis.com/openstack-services/solutions-engineering/">Solutions Engineering</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack-services/custom-deployment/">Custom Deployment</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack-services/custom-support/">Custom Support</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack-services/driver-development/">Drivers</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="subglobal5" class="subglobalNav" style="visibility: hidden;">
|
||||||
|
<div class="subglobal_vis">
|
||||||
|
<a href="http://www.mirantis.com/openstack-use-cases/saas-web/">SaaS/Web Vendors</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack-use-cases/service-providers/">Service Providers</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack-use-cases/enterprise-private-cloud/">Enterprise Cloud</a>
|
||||||
|
<a href="http://www.mirantis.com/openstack-use-cases/infrastructure-technology/">Infrastructure Vendors</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="subglobal6" class="subglobalNav" style="visibility: hidden;">
|
||||||
|
<div class="subglobal_vis">
|
||||||
|
<a href="http://www.mirantis.com/company/about/">About</a>
|
||||||
|
<a href="http://www.mirantis.com/company/our-philosophy/">Our Philosophy</a>
|
||||||
|
<a href="http://www.mirantis.com/company/customer-successes/">Customer Successes</a>
|
||||||
|
<a href="http://www.mirantis.com/company/leadership/">Leadership</a>
|
||||||
|
<a href="http://www.mirantis.com/company/investors/">Investors</a>
|
||||||
|
<a href="http://www.mirantis.com/company/press-center/info/">Press Center</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block footer -%}
|
{% block footer -%}
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{%- if theme_googleanalytics_id -%}
|
{%- if theme_googleanalytics_id -%}
|
||||||
|
74
_templates/mirantis/static/menu.css
Normal file
74
_templates/mirantis/static/menu.css
Normal file
@ -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 */
|
80
_templates/mirantis/static/menu.js
Normal file
80
_templates/mirantis/static/menu.js
Normal file
@ -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})
|
||||||
|
});
|
||||||
|
});
|
@ -12,6 +12,7 @@
|
|||||||
@import url("cloud.css");
|
@import url("cloud.css");
|
||||||
|
|
||||||
@import url("mirantis_style.css");
|
@import url("mirantis_style.css");
|
||||||
|
@import url("menu.css");
|
||||||
|
|
||||||
.highlight .hll {
|
.highlight .hll {
|
||||||
background-color: #C0FF7C !important;
|
background-color: #C0FF7C !important;
|
||||||
|
@ -413,7 +413,7 @@ a.glink:hover {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
right: 0px;
|
left: 0px;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user