diff --git a/docs/static_site/src/_includes/get_started/get_started.html b/docs/static_site/src/_includes/get_started/get_started.html
index 77367c7ed337..772802fbaeb5 100644
--- a/docs/static_site/src/_includes/get_started/get_started.html
+++ b/docs/static_site/src/_includes/get_started/get_started.html
@@ -20,9 +20,14 @@
Installing MXNet
MXNet Version
-
-
-
+
+
+
- master
- v1.5.1
- v1.4.1
diff --git a/docs/static_site/src/_sass/minima/_getting_started.scss b/docs/static_site/src/_sass/minima/_getting_started.scss
index f6775927cdcb..c0dc96837308 100644
--- a/docs/static_site/src/_sass/minima/_getting_started.scss
+++ b/docs/static_site/src/_sass/minima/_getting_started.scss
@@ -67,8 +67,14 @@
li.opt.versions {
padding: 10px;
-}
+ &:hover {
+ background-color: $color-mxnet;
+ & a {
+ color: whitesmoke;
+ }
+ }
+}
.dropdown {
position: relative;
@@ -91,6 +97,26 @@ ul.dropdown-content {
list-style-type: none;
}
+ul.version-dropdown {
+ @extend ul.dropdown-content;
+ left: 0px;
+ width: 100%;
+}
+
+.current-version.dropbtn.btn:focus{
+ outline: 0;
+}
+
+.current-version .dropdown-caret {
+ position: relative;
+ top: 4px;
+}
+
+.version-dropdown .active a {
+ color: $grey-color-light;
+}
+
+.version-dropdown a,
.dropdown-content a {
color: $grey-color-dark;
text-decoration: none;
@@ -113,7 +139,7 @@ ul.dropdown-content {
}
.dropdown:hover .dropbtn {
- background-color: $color-mxnet
+ background-color: $color-mxnet;
}
/*
diff --git a/docs/static_site/src/assets/js/options.js b/docs/static_site/src/assets/js/options.js
index 5d3f8d201944..93d541ad52d5 100644
--- a/docs/static_site/src/assets/js/options.js
+++ b/docs/static_site/src/assets/js/options.js
@@ -51,8 +51,8 @@ $(document).ready(function () {
if (urlParams.get('version')) {
versionSelect = urlParams.get('version');
$('li.versions').removeClass('active');
- $('li.versions').each(function(){is_a_match($(this), versionSelect)});
- $('.current-version').html( versionSelect + ' ' );
+ $('li.versions').each(function () { is_a_match($(this), versionSelect) });
+ $('.current-version').html(versionSelect + '');
queryString += 'version=' + versionSelect + '&';
}
if (urlParams.get('platform')) {
@@ -133,4 +133,20 @@ $(document).ready(function () {
setSelects(urlSearchParams(window.location.search), true);
});
+ let timer;
+ const toggleDropdown = function(showContent) {
+ if (timer) clearTimeout(timer);
+ if (showContent) {
+ timer = setTimeout(function() {
+ $(".version-dropdown").show()
+ }, 250);
+ } else {
+ $(".version-dropdown").hide()
+ }
+ }
+
+ $("#version-dropdown-container")
+ .mouseenter(toggleDropdown.bind(null, true))
+ .mouseleave(toggleDropdown.bind(null, false))
+ .click(function() {$(".version-dropdown").toggle()});
});