Added menu
This commit is contained in:
Ivan Kolodyazhny
parent
51c761ac7b
commit
9fa868edce
|
|
@ -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 %}
|
||||
<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 -%}
|
||||
{{ super() }}
|
||||
{%- if theme_googleanalytics_id -%}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
@ -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("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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue