Joomla 3.3.6 alatt kisérletezgetek, szeretnék összehozni egy off-canvas féle menüt.
Hadd kérdezzek valami triviálisat: hogy kell beilleszteni ezt úgy, hogy működjön?
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".offCanvasToggler").click(function(){
$(".menu-wrapper").toggleClass("visible");
});
});
</script>
<style>
.menu-wrapper { position: relative; float: left; }
#menu {
background-color: transparent;
width: 0; height: 0; margin:-1px; overflow: hidden; }
.menu-wrapper.visible {
background-color: silver; width: 70%; height: 100%;
display: block; }
.menu-wrapper.visible #menu {
background-color: silver; width: 100%; height: 100%; }
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<button class="offCanvasToggler">Toggle class</button>
<div class="menu-wrapper">
<div id="menu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</div>
</div>
<p>Paragraph.</p>
<p>Paragraph.</p>
<h2>Heading 2</h2>
<p>Paragraph.</p>
<p>Paragraph.</p>
</body>
</html>
Ott van a probléma, hogy a javascript -- úgy tűnik -- ebben a formájában nem működik. Gondolom dollár-jelek nélkül kellene összehozni, de én ehhez nem értek...
Ennek felhasználásával kezdtem tervezgetni:
jQuery toggleClass() Method
Valaki át tudná alakítani ezt javascript részt olyanra, hogy használható legyen?
Témaindító
