I'm talking about the button that appears below certain screen widths which hides/unhides the menu when clicked (screenshot below). I'm trying to replicate its behavior on my website without resorting to using bootstrap (because I like to work without frameworks).
I've looked at the source code, but can't figure out exactly how it works, and what the most efficient way is to replicate the behaviour. From what I can tell it works with javascript by applying a hide/unhide class to the menu, activated by the button.
Would it be possible to replicate this with the css checkbox hack? Or is using javascript better?
This is fairly simple:
Add the hamburger menu icon
Have a CSS class that makes the nav area active
Make JS add/remove that class from the nav area
Use CSS transitions to take care of the animation (they're more likely to be accelerated on a mobile device)
I like the implementation on http://purecss.io.
Also check out http://www.ymc.ch/sandbox/hamburger/mobile-menu-demo.html
edit:
I misread question the first time.
I think you'd have a better time using javascript.
If you are using jquery you could use the toggle method.
$("#hide-show-button").click(function(){
$(".nav").toggle();
});
Related
to be clear, I want to add a hamburger menu in an HTML web app that will open a menu screen when clicked. I want the menu to animate from the corner of the screen (where the menu button is located). I would like to accomplish this using HTML, CSS, or javascript because those are the languages I'm currently studying. If someone could recommend a beginner-friendly method to accomplish the above-stated goal, I would be extremely grateful. Thank you for your time.
To add on to #Paul's answer - definitely use Bootstrap, and if you are going to use Bootstrap, don't forget to link the Bootstrap library to your HTML file in your header and reference jquery and javascript near the end of your code. More complete instructions can be found here: http://getbootstrap.com/docs/4.0/getting-started/introduction/
If you are looking for an easy way to do it, I would reccomend Bootstrap as it is a great resource and CSS framework for creating lots of components. I suggest looking at its dropdowns library for creating a hamburger menu.
Cheers.
I am new to javascript and jquery. In the online course i am doing, we are learning to make our mobile menu appear and disappear by having it add a modifier to the selector element when you click the menu icon (.nav-bar__menu-content to .nav-bar__menu-content--is-visible, for example). When i go to chrome inspect, i can see that the js is working because the modifier is being added and then removed when i click on the menu icon. However, the actual content is not appearing and then disappearing. I'm not sure why? There doesn't seem to be a specificity issue and i am pretty sure i am targeting the proper selector. Any help is appreciated and also sorry if my language is confusing. I'm new to this.
code
I have a web page with anchor links and I wish for them to stay highlighted when they are clicked AND when the user manually scrolls down. I have seen some jquery code here codepen.io/jakob-e/pen/mhCyx that does what I wish to do, however I wish to achieve this effect using raw javascript and I can't see it posted anywhere. Thanks for any help.
Sounds like you're looking for animated scrolling and scrollspy functionality? Shameless plug for two native JS (non-jQuery) scripts I wrote that are designed to work together:
Smooth Scroll: https://github.com/cferdinandi/smooth-scroll
Gumshoe for scrollspy: https://github.com/cferdinandi/gumshoe
How can a website shift effect be done like this website? http://showmyshift.com/# When you click a link, the content flies by and shifts.
I believe they are either using CSS3 or Jquery to do this, how can it be done?
EDIT: I also have no idea what this effect is called, nor have I seen it before. I'm hoping someone more experienced has seen this effect before and knows what it is.
it's just a slider, simply look for a slider that allows linking to specific slides, like Unslider (tricky if you don't know what are you doing) or Owl Carousel or the millions out there, and simply link each menu item to a slide. You can also use CSS, but for what you say about your knowledge, it's not recommended since it's way more difficult
I'm trying to animate a sidebar with javascript that shows category icons by default and shows the category words on hover. The closest example I can think of is this one: http://piccsy.com/.
Can anyone help me with this? I'm still getting the hang of javascript.
You could do this just with CSS using .myclass:hover you'd have to check compatibility with older browsers because you will have to use css transition to animate. This is a good starting point CSS3 Transitions
Or if you want to use javascript I'd recommend using JQuery's mouseover() event function. when this event is triggered you can then animate the side nav.
Good luck