biofriction-wp-theme/node_modules/foundation-sites/test/visual/drilldown/drilldown-show-menu.html

112 lines
4.2 KiB
HTML
Raw Permalink Normal View History

2021-10-26 14:18:09 +02:00
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet">
<style>
#menu-a a { background: rgb(255,230,230); }
#menu-b a { background: rgb(230,255,230); }
#menu-c a { background: rgb(230,230,255); }
#menu-x a { background: rgb(255,115,0); }
label { display: inline-block; margin-right: 20px; cursor: pointer; }
label > input[type="radio"] { margin-right: 5px; }
.is-drilldown { margin-bottom: 10px; }
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="auto cell"></div>
<div class="medium-6 cell">
<div class="callout">
<p>should be possible to open any drilldown (sub)menu via JS</p>
<div class="expanded button-group">
<button type="button" class="button" data-show-menu="menu-a">Show A</button>
<button type="button" class="button" data-show-menu="menu-b">Show B</button>
<button type="button" class="button" data-show-menu="menu-c">Show C</button>
<button type="button" class="button" data-show-menu="menu-x">Show X</button>
</div>
<div>
<form>
<label><input type="radio" name="comparison-switch" value="new" checked> Use new showMenu</label>
<label><input type="radio" name="comparison-switch" value="old"> Use current show</label>
</form>
</div>
</div>
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" id="menu-a">
<li>
<a href="#">Item A1</a>
<ul class="vertical menu nested" id="menu-b">
<li><a href="#">Item B1</a></li>
<li><a href="#">Item B2</a></li>
<li><a href="#">Item B3</a></li>
<li>
<a href="#">Item B4</a>
<ul class="vertical menu nested" id="menu-c">
<li><a href="#">Item C1</a></li>
<li><a href="#">Item C2</a></li>
<li><a href="#">Item C3</a></li>
</ul>
</li>
<li><a href="#">Item B5</a></li>
</ul>
</li>
<li><a href="#">Item A2</a></li>
<li>
<a href="#">Item A3</a>
<ul class="vertical menu nested" id="menu-x">
<li><a href="#">Item X1</a></li>
<li><a href="#">Item X2</a></li>
</ul>
</li>
<li><a href="#">Item A4</a></li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione id accusantium dolore sequi architecto at soluta, nulla nam? Nemo magnam repellendus iure, ut recusandae voluptatibus, dolores pariatur facere illo! Sapiente.
</p>
</div>
<div class="auto cell"></div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
var demoType;
$(document).on('click', '[data-show-menu]', function(e){
e.preventDefault();
var $menu = $('#'+$(this).data('showMenu'));
if (demoType == 'old') {
if ($menu.is('[data-drilldown]')) {
// No possibility to show root except of hide all
$('[data-drilldown]').foundation('_hideAll');
} else {
$('[data-drilldown]').foundation('_show', $menu.parent('li'));
}
} else {
$('[data-drilldown]').foundation('_showMenu', $menu);
}
});
$(document).on('change', 'input[name="comparison-switch"]', function(){
demoType = $('input[name="comparison-switch"]:checked').val();
console.log('swtiched to ['+demoType+']');
});
</script>
</body>
</html>