Flex nav is a hamburger menu Jquery website. Download the zip file from github / flexnav
On the website, it tells you to name the navigation – we hold it in a list in Dreamweaver, just give it an extra class (flexnav) and also something called data-breakpoint. Java script uses this attribute.
The script recognises that it is our navigation.
“menu-button” is the hamburger button. once this is all done, we need to start linking the css and the js files.
Didn’t work, no button, not clickable. Why?
We put java script in by using script tags. They are type tags, but we havent put anything in the middle, we just put a source file in which lives inside that tag. There is no content, we will put content in when we initialise it.
By adding script tags we can make the code see that it is js and we need to.
Go to Google to find Jquery CDN (content delivery network) and copy and paste the Jquery link for the js to communicate to its Jquery server.
Now I want to style it because it looks horrible and doesn’t match the colour scheme.
I want all of the tabs to move across the page, so for styling we need to target the list items. By going to main CSS and scrolling to the media queries, notice that we set it to 800 so when we put the data attribute in, it was the same thing. If you want to change it for navigation only, you need to go to the list to do it.
RWise Designs 