Add main nav menu
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
Родитель
9575f8621b
Коммит
6161e692a9
|
|
@ -61,6 +61,9 @@
|
|||
var templateUrl = 'https://nextcloud.com/wp-content/themes/next';
|
||||
</script>
|
||||
|
||||
<!-- menu popup -->
|
||||
<link rel="stylesheet" type="text/css" href="/css/parts/menu-popup.css" media="all">
|
||||
|
||||
<body class="page page-id-994 changelog not-front"><!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
|
||||
|
||||
<nav class="nav headroom headroom--top headroom--not-bottom" id="nav" style="opacity: 1; display: block;">
|
||||
|
|
@ -386,6 +389,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
<!-- menu popup slide animation handler -->
|
||||
<script src="/js/menu-popup.js"></script>
|
||||
|
||||
|
||||
<!-- Piwik -->
|
||||
|
||||
<!-- TODO
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
* @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
.nav .container .nav__bg-wrapper .nav__bg {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: white;
|
||||
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.11);
|
||||
border: solid 1px #f1f1f1;
|
||||
border-radius: 4px;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
will-change: transform;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 100%;
|
||||
opacity: 0;
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
/**
|
||||
* @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @author John Molakvoæ <skjnldsv@protonmail.com>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
function initMenus($items) {
|
||||
this._showPopupForMenu = function(event) {
|
||||
var $popupContainer = document.querySelector('.nav .container .nav__bg-wrapper')
|
||||
var $popup = $popupContainer.children[0]
|
||||
var $menu = event.target.querySelector('ul')
|
||||
var menuRect = $menu.getBoundingClientRect()
|
||||
var popupRect = $popupContainer.getBoundingClientRect()
|
||||
|
||||
// calc the left position (menu have 15px extra padding)
|
||||
var leftPos = menuRect.left + 15 - popupRect.left
|
||||
$popup.style.width = menuRect.width - 15
|
||||
$popup.style.height = menuRect.height
|
||||
$popup.style.transform = `translateX(${leftPos}px)`
|
||||
$popup.style.visibility = 'visible'
|
||||
$popup.style.opacity = 1
|
||||
};
|
||||
|
||||
this._hideMenuPopup = function($event) {
|
||||
var $popupContainer = document.querySelector('.nav .container .nav__bg-wrapper')
|
||||
var $popup = $popupContainer.children[0]
|
||||
$popup.style.visibility = 'hidden'
|
||||
$popup.style.height = 0
|
||||
$popup.style.opacity = 0
|
||||
};
|
||||
|
||||
// bind mouse events to menu items
|
||||
$items.forEach(function($item) {
|
||||
$item.addEventListener('mouseenter', this._showPopupForMenu);
|
||||
$item.addEventListener('mouseleave', this._hideMenuPopup);
|
||||
});
|
||||
}
|
||||
|
||||
initMenus(document.querySelectorAll('.nav .container .nav__sections-wrapper > ul .nav__section'))
|
||||
Загрузка…
Ссылка в новой задаче