Add main nav menu
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
Родитель
9575f8621b
Коммит
6161e692a9
|
|
@ -59,7 +59,10 @@
|
||||||
<meta name="msapplication-TileImage" content="https://nextcloud.com/media/screenshot.png">
|
<meta name="msapplication-TileImage" content="https://nextcloud.com/media/screenshot.png">
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var templateUrl = 'https://nextcloud.com/wp-content/themes/next';
|
var templateUrl = 'https://nextcloud.com/wp-content/themes/next';
|
||||||
</script>
|
</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"> -->
|
<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"> -->
|
||||||
|
|
||||||
|
|
@ -386,6 +389,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- menu popup slide animation handler -->
|
||||||
|
<script src="/js/menu-popup.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<!-- Piwik -->
|
<!-- Piwik -->
|
||||||
|
|
||||||
<!-- TODO
|
<!-- 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'))
|
||||||
Загрузка…
Ссылка в новой задаче