Currently I am working on a project that is similar to this example:
Off Canvas Menu Example
HTML:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
CSS:
.left-off-canvas-menu {
height: 100vh;
}
JS:
$(document).foundation();
$('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');
I am using off-canvas to show a menu on page. however based on some condition I like to turn off animation and just the menu pops in without any animation and then turn the animation on later based on some other conditions?
Would that be possible ?
Related
I am looking for help, I am doing a project but and for it I am making a website to present it on. I have made a (red coloured) nav bar that covers the top 100 pixels of my website. Under it I have multiple containers that have text, images and a video. When scrolling, I would love for all these containers to go to 100 opacity i.e. disappear when they reach the nav.
In other words make the nav the top layer of the website and any container, that when scrolling down, that reaches it, it would not go over it and cover it as I have links in my nav bar. Also, this is not urgent, but if I wanted those links to go to a certain part of the current page I am on, how would I do that?
Disclaimer: CSS would be most appropriate for my project, if not possible, that's ok.
All help is greatly appreciated! Thank you!
Here is the JSFiddle of the website: https://jsfiddle.net/gmsrbh70/
<header>
<nav>
<div class='title'><h1><a href='index.html'>Computer Science Project</a></h1></div>
<ul>
<li> <a href= '#section1'> Introduction</a></li>
<li> <a href= '#section2'> About </a></li>
<li> <a href= '#section3'> Graphs</a></li>
</ul>
</nav>
</header>
<div class='task'>
<h1> What was the task assigned?</h1>
<p>The Create an innovative computational artefact which you feel could be used to address any or some of the issues raised in the context of this brief and report on the work and process involved.</p>
</div>
I am enjoying learning to code but have a frustrating issue I know little about.
I used the following code to support the site including a scrolling nav bar:
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
.........
<div class="container navbar-container">
<h2>Scroll to a specific <br>restaurant:</h2>
<nav class="navbar navbar-default">
<ul class="nav nav-pills nav-stacked">
<li>2 WEST</li>
<li>13 NORTH</li>
<li>15 CHURCH</li>
<li><h5>BAILEY'S CAFE-$Deal!</h5></li>
<li>THE BARRELHOUSE</li>
<li><h5>BEEKMAN BAR & EATERY-$Deal!</h5></li>
.....
</ul>
</nav>
</div>
</body>
</div>
Then, to add popup box I added:
...
Hours
<div data-role="popup" id="westhours">
<h2>Monday-Thursday 11:00am - 11:00pm<br>
Friday & Saturday 11:00am - 12:00am<br>
Sunday 10:30am - 10:00pm<br>
Please note: Kitchen closes 1 hour prior to closing.</h2>
</div>
</li>
</ul>
With both code segments, the scrolling nav bar doesn't link to sections.
If I delete the nav bar code, the popup box works.
If I delete the original section, the popbox doesn't work.
I know I must have conflicting source and script code, but I can't find the right ones to delete so both the popup box and navbar function!
Please help!
take this working code from author of pluggin. Then add new tabs, rename them.
Okay so I have seen lots of accordion examples out there - some are extremely complex and some really simple.
I have just been looking for a quick simple accordion menu in JQuery and I have found one that is almost perfect.
My accordion contains 3 headings (product categories) and each contain a number of links.
<div class="sideNav">
<!--Accordion Menu 1-->
<h3 class="js_accordion-button">First Category</h3>
<ul class="js_accordion-content">
<li>Stickers</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<!--Accordion Menu 2-->
<h3 class="js_accordion-button">Second Category</h3>
<ul class="js_accordion-content">
<li>Other</li>
<li>Lemon</li>
<li>Cheese</li>
</ul>
</div>
Here is my JQuery
<script>
jQuery(function() {
jQuery('.js_accordion-button').on('click',function() {
jQuery('.js_accordion-content').slideUp('fast');
jQuery(this).next('.js_accordion-content').slideDown('fast');
});
});
</script>
If you were to navigate to the stickers page currently the accordion menu would be all closed on the left.
What I want to happen is it to open the accordion menu that contains the active page link as default.
I am green in this area and I am trying to learn while I build a virtual resume for a website I can use to advertise my programming services (my strength lies more with C#, Java and similar languages :')
Something I think would look pretty cool, is if when you click on a link in my side-bar, the content on the page slides out and is replaced with the content on the new page that slides in, in the previous page' place.
I am a bit lost on how to achieve this though and if I have to do a per-page thing, or if I can make one general method in Javascript to take care of it. I am using jQuery and bootstrap.
var main;
main = function () {
$(".sidebar-nav a").click(function() {
<!-- Not sure what to do here -->
<!-- Pseudo Code -->
<!-- find out what element was pressed
slide out content on current page using animate();
slide in content from the element that was pressed using animate(); -->
})
}
$("document").ready(main);
The HTML:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<h1>Brand</h1>
</li>
<li>
<a href="#">
Index
</a>
</li>
<li>
<a href="#">
About Me
</a>
</li>
<li>
<a href="#">
Resume
</a>
</li>
<li>
<a href="#">
Contact
</a>
</li>
</ul>
</div>
<!-- Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
Toggle Menu
</div>
</div>
</div>
</div>
</div>
Let me know if you need the CSS.
You should use an AJAX technology to seamlessly load another page's HTML contents inline into the document.
The best choice (in my opinion) for this situation is the jQuery function load(), due to it's simplicity and pure convenience. You can also send a callback function, it's easy to implement.
You could then easily implement a CSS animation using the animation attribute.
This is a tricky question to phrase but I'll try my best:
If you go to http://msukkar.tumblr.com and resize your window (if you're using a desktop/laptop) until the hamburger menu icon appears then click on it to get the drop-down menu, click on it again to hide it. You'll find that when you resize your window back up full-width the original navigation is gone.
I'm curious as to how I can prevent this exactly. I'm adept at HTML & CSS but very new to Javascript.
The Javascript that I used is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
/* prepend menu icon */
$('#menu_wrapper').prepend('<img id="mobile_menu" src="http://msukkar.com/wp-content/themes/pptitan/images/mobile_menu.png" alt="">');
/* toggle nav */
$("#mobile_menu").on("click", function () {
$("#menu_border_wrapper").slideToggle();
$(this).toggleClass("active");
});
});
});
</script>
The HTML for the menu is
<div id="menu_wrapper">
<!-- Begin logo -->
<a id="custom_logo" class="logo_wrapper" href="http://msukkar.com" style="font-family: 'Oswald', sans-serif; letter-spacing: 1px; font-size: 14px; margin-top: 16px; ">
MATT SUKKAR
</a>
<!-- End logo -->
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper">
<div class="menu-home-container">
<ul id="main_menu" class="nav">
<li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.tumblr.com" style="color: #ff0000">
Blog
</a>
</li>
<li id="menu-item-1485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.com/contact/">
Contact
</a>
</li>
</ul>
</div>
<select>
<option selected="selected" value="">
- Main Menu -
</option>
<option selected="selected" value="http://msukkar.tumblr.com">
Blog
</option>
<option value="http://msukkar.com/contact/">
Contact
</option>
</select>
</div>
</div>
</div>
I hope I explained that well enough for you all. Thanks in advance for your help and if need be I'll try to clarify further.
Here's your problem:
$("#menu_border_wrapper").slideToggle();
Which shows and hides your menu when you click the hamburger.
The problem is that when you are in desktop view, your entire menu is contained within #menu_border_wrapper and is displayed as it should. Then you resize down to mobile and click the hamburger. On your first click, #menu_border_wrapper slides down and your menu becomes visible. On your second click, #menu_border_wrapper slides up and your menu becomes invisible. This is fine on mobile since the hamburger icon itself isnt contained within #menu_border_wrapper, but when you resize the window back to desktop, the menu is gone! Remeber how on the second click the menu was sliding up and was set to display: none. Well now since your desktop size menu is contained within #menu_border_wrapper, it's not there anymore.
There are probably a lot of ways you can solve this. Move the actual menu buttons outside #menu_border_wrapper on desktop aswell, make two completely unique menues for mobile and desktop or set #menu_border_wrapper to display: block !important on desktop.
Hope it helps!