Hi all, What is the usual way to go about creating the 3 lines nav menu as seen here - https://www.hyperisland.com/ Thanks!
There are hundreds of examples that you can check out on codepen if you search the term "nav." I checked myself there are some really good ones that you could take a leaf from and inspect/play around with the code easily since it's on codepen. I did a quick google search and uncovered this tutorial that you might find helpful: http://blog.teamtreehouse.com/how-to-build-a-three-line-drop-down-menu-for-a-responsive-website-in-jquery I hope that helps!
That helps! I didn't realize I could find code examples at Code Pen. Thanks! Will check the link too.
There are several ways to do this. One way is to use the unicode ☰ You can use an image. You can use a pseudo element <pre> <code> <a href="#" class="menu-icon"></a> </code> </pre> <pre> <code> .menu-icon{ position: relative; padding-left: 1.25em; font-size: 2em; } .menu-icon:before { content: ""; position: absolute; left: 0; top: 0.25em; width: 1em; height: 0.15em; background: black; box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black; } </code> </pre> You can use a pseudo border. <pre> <code> <a href="#" class="menu-icon"></a> </code> </pre> <pre> <code> .menu-icon{ position: relative; padding-left: 1.25em; font-size: 2em; } .menu-icon:before{ content: ""; position: absolute; top: 0.25em; left: 0; width: 1em; height: 0.125em; border-top: 0.375em double #000; border-bottom: 0.125em solid #000; } </code> </pre>
That you call it a "hamburger" just proves my reasoning for why my advice on that is DON'T!!! The uselessly vague and meaningless icon crap for the menu hide on smaller displays just makes menus HARDER to use, not easier on mobile devices. Sure, it's hot, trendy and everyone seems to be doing it, but has anyone actually tried USING this crap on mobile? I prefer to make a somewhat larger area with the words "Show menu" or "hide menu" with an arrow next to it, that way users might actually have some clue that there is a menu and where to touch/click to open/close it. I know, makes WAY too much sense.
If your project already uses jQuery, then you might want to use this very lightweight plugin tinynav.viljamis.com , it converts navigation UL > LI items into a <select> dropdown easily. Like deathshadow stated above, the 3 lines menu icon can get a bit of an hassle, having clear text for opening closing menu could be better. I often use the above plugin to convert my navigations into select dropdown with the words "Navigation .... " or "Select ...." or "Browse ...." etc. Attached an example.
Then it's fat bloated slow loading battery chewing BS that needs to be thrown in the trash. Sorry, not a fan. If it's jQuery based, it's NOT lightweight. If it's scripttardery just for navigation, it's not lightweight. If the website it is on reeks of "accessibility, what's that?" it's probably not even worth looking at. To be frank, if you need JavaScript on a MENU, you likely need to go back and learn how to use HTML and CSS properly... and that goes over 9000 for if you need the halfwit bloated idiotic dumbass mouth-breathing BULLSHIT known as jQuery. Especially when re-arranging/hiding the menu in a responsive layout, since that means :target is available for an instant case of "look ma, no scripting"
If you don't want to use jQuery, you can use CSS3 transitions with plain ol' javascript. I made a pen and tutorial on doing just that, check it out here: http://codepen.io/robbyk/pen/JFdru If you use rounded off em's or px's you can remove all the margin-top javascript in there.
Or you could skip the scripttardery entirely and use :target - has the nice side-effect of scrolling the menu to the top of the display so as much of it shows at the start as possible.
here is a way i threw together really quick using only html5 / css3 (bootstrap is used here as well): <nav class="navbar sticker wrapper100percent"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-ex1-collapse"> <nav class="cl-effect-12"> <ul class="nav navbar-nav pull-right"> <li class="active"><a href="#0">Home</a></li> <li><a href="#1">About Us</a></li> <li><a href="#3">Services</a></li> <li><a href="#4">Our Works</a></li> <li><a href="#5">Quotes</a></li> <li><a href="/payments.php">Make A Payment</a></li> <li class=""><a href="#6">Contact</a> </li> </ul></nav> </div><!-- /.navbar-collapse --> </nav> HTML: .navbar { background: #fff; position: relative; z-index: 100; min-height: 80px; height: 80px; padding-right: 15px; padding-left: 15px; margin-bottom: 0px; border-radius: 0; } .navbar-toggle { position: relative; float: right; width: 42px; height: 34px; margin-top: 22px; margin-bottom: 8px; background-color: #1c2124; border: none; border-radius: 0; } .navbar-toggle .icon-bar { background-color: #c9b67f; } .navbar-collapse { padding-right: 15px; padding-left: 15px; overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } Code (CSS): hope this helps D
Which does an excellent job of showing just how ***** stupid HTML 5 and bootcrap are; NAV inside NAV? (yeah, that's legit), endless pointless DIV for nothing, presentational use of classes -- AND it is using JavaScript in the form of bootcraps halfwit nonsense with the even bigger dumbass nonsense known as the "data-" attributes. As I often say, if you don't know what's wrong with code like this: <div class="collapse navbar-collapse navbar-ex1-collapse"> <nav class="cl-effect-12"> <ul class="nav navbar-nav pull-right"> Code (markup): Do the world a favor, back the flying purple fish away from the keyboard, and don't come back until you learn how to use HTML and CSS properly... hence the 858 bytes of markup doing 433 bytes job. <div id="mainMenu"> <a href="#" class="hideMenu"></a> <a href="#mainMenu" class="showMenu"></a> <ul> <li><a href="#0" class="current">Home</a></li> <li><a href="#1">About Us</a></li> <li><a href="#3">Services</a></li> <li><a href="#4">Our Works</a></li> <li><a href="#5">Quotes</a></li> <li><a href="/payments.php">Make A Payment</a></li> <li><a href="#6">Contact</a></li> </ul> <!-- #mainMenu --></div> Code (markup): Here's a demo of how I'd do that: http://www.cutcodedown.com/for_others/responsiveMenu/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/responsiveMenu/ is unlocked for easy access to the gooey bits and pieces (not that there's much there other than the CSS in this case). No javascript, no halfwit dumbass framework BS... just clean simple HTML and CSS. THAT's why bootcrap is mind-numbingly mouth-breathing stupidity. I swear "use bootcrap" is the new "use jQueery" -- 99.999999999% of the time someone says it, DON'T!!! As I keep saying, do yourself a favor, go find a stick and scrape that off.
such as any framework - bootstrap is there as a responsive shortcut. I happily implement bootstrap as needed and even though it may add a few extra bytes to the script lets be really honest - with the internet band with and high speed capable devices of today - does 400additional bytes truly matter? Personal preference? perhaps. I enjoy bootstrap and will continue to develop with it.
Does when you figure the rat-**** bat-**** dirty old **** insane framework size into it, which in the case of bootcrap is by itself three times the size I'd let the markup, CSS and scripts of a normal page reach. Does when across the entire page it's twice the code, meaning TWICE the bandwidth for nothing -- though laughably most sites built with bootcrap the overall is five to eight times as much markup and twenty to thirty times the overall HTML+CSS+SCRIPTS. Sure as shine-ola counts when you have an overloaded server -- the real laugh being I've had people say things like that before where they were whitespace compressing; RIGHT... wait, do you minify/whitespace compress? LOL... Adds up quick and the less crap you have in the markup, the less there is on pageloads of subpages. Part of why STYLE has NO business even EXISTING as a tag, and has all but the narrowest of usage justifications as an attribute! Sure, it's only 400 bytes more markup on that one section, it's also two to three times the markup over the entire page mated to 35k of JS and 135k of CSS minified -- which means BY ITSELF MINIFIED it's more than three times what I'd EVER allow an entire forum template page-load of HTML, CSS and Scripting to reach without minification WITH pre-caching sub-page appearance. It's the pinnacle of developer ineptitude. ... and to be frank, I'm sick as HELL of the dumbass "Oh but with broadband" argument we've been hearing for a decade and a half; it's STILL bullshit in areas like northern New England, most of the American northwest, or our poor friends in places like Canada, Australia and New Zealand with their metered, throttled and general "how badly can the ISP **** you" connections. But sure, sleaze out fat bloated poorly coded broken inaccessible websites and then just throw goofy cache-tard BS like Varnish at it and more hardware at it, that will make everything better. Bootcrap -- and pretty much every other framework out there -- is bloated slow halfwit crap used by the inept; the only explanation I can possibly fathom for anyone to use it is a failure to know enough HTML, CSS, JS, or accessibility to even be building websites in the first damned place -- likely out of the typical mental failings of apathy, ignorance, and wishful thinking. Developers are dumber for it even EXISTING; and if you know what separation of presentation from content and semantic markup actually means, you'd know why. The real laugh being they sell this inept re-re bs to people as saving time, costs, and effort when if you would take the time to learn to use HTML and CSS properly, it does THE EXACT OPPOSITE!!!!! Herpafreakingderp people! Hardly a shock people end up with these multi-megabyte monstrosities built from four dozen or more separate files, then wonder why their site is slow and they're being threatened with being kicked off their hosting... and why throwing idiotic BS like Varnish or CDN's at it doesn't actually help other than making sure you pay more for no real improvement. See these forums!
so suffice to say, you dislike bootstrap? lol. Look I'm not here to get into a pissing match over to use a framework or not - as I mentioned prior, it is generally personal preference. You do make valid points but in the end - the developer who is hired to build a site that the client request a framework, such as bootstrap, who are we to say no I wont use that due to the reasons mentioned above. To me, bootstrap does an effective job for what it is - a responsive framework. Since i use bootstrap from time to time does that mean I don't know d*ck about HTML and CSS development? not likely, nor other developers for that matter. As far as the JS references within bootstrap, i mean i guess i KIND OF see your point as far as the calls and class changes, but its not javascript period end of story. Anyways, at the end of the day, you have your opinion and your way to do things and other developers have theirs. It is the beauty of this industry, that has so much work we all can prosper. D.
... and what you call beauty I look upon with disgust to the point of nausea. The "industry" has been taken over by sleazeball scam artists who have no business developing jack **** for anyone, which is why the advice I'm stuck giving most people asking for help usually amounts to "throw it out and start over". The TERRIFYING level of ignorance being advocated as good practice these days, and wanton ignorance of what HTML even is or how to use it properly is very quickly turning that nausea into full on projectile vomiting; There's a reason that all I have for the vast majority of jackasses sleazing out websites using crap like Bootcrap, turdpress, jqueery, blueprint, or any other dumbass framework is two giant middle fingers. One for them and one for the source they code in on. I swear, it's like people WANT to fail...
ohhh k. When did you start coding? Cobol? Using a framework or a CMS as a platform does NOT make a developer poor. Just because you choose to spend 100's of hours additional to create something from scratch EVERYTIME doesn't make you any better than I or the next guy. I have written sites from scratch, and I will again if and when the project's budget permits. Unfortunately not everybody has 20k and up to develop websites, thus wordpress and others were born.
RCA 1802 machine language actually, so you're not that far off. Though I've seen far too many frameworks in far too many languages like Cobol or DiBOL to ever trust them ever again. Hell, I used to make money recoding DiBOL programs to run dozens of times faster by getting rid of intentional code bloat... From framework overhead to simply deleting comments. (aren't interpreted languages FUN? NOT!) Which is why I wonder if developers think they are being paid by the K-LoC again. Most frameworks do, just look at the inaccessible bloated slow train wrecks that result. Letting the CMS piss out disastrously bad markup DOES mean a poor developer... again, if you don't know what's wrong with this: <div class="header-menu"><ul id="menu-header-menu" class="menu"><li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-212 current_page_item menu-item-248"> Code (markup): ... and take no steps to fix it, then yes, you are a poor developer, and to be frank HAVE NO DAMNED BUSINESS building websites for ANYONE. It all just reeks of more "Lame excuses" -- good article on that: http://www.456bereastreet.com/archive/200704/lame_excuses_for_not_being_a_web_professional/ If it takes hundreds of hours to put out semantic CSS with an elastic semi-fluid responsive layout, the developer must be so inept that Helen Keller would go "Damn, what's wrong with that kid?" ... and to be frank, if it takes me more than an hour to do HTML and CSS for a layout, my parkinsonism is likely on full burn and I'm using the puffer-stick instead of my hands. I simply do not grasp how using more code, to write EVEN MORE CODE, to then completely bypass the most basic of development concepts like semantics, separation of presentation from content and accessibility is "easier" or "better" -- at BEST these "frameworks" are placebo bullshit, at worst they are the antithesis of sane and rational design delivering the exact opposite of everything they claim. I say much the same thing about the pointless allegedly semantic tags HTML 5 introduces, that just re-introduce all the redundancies 4 STRICT was trying to get rid of... ... and it's time we started putting boots to backsides on this so we might actually go back to a useful web, instead of a bloated slow inaccessible mess that is harder to use and less useful to users than it was in the 486 days on dialup. But sure, let's just have everyone sleaze out shit any old way, who cares if the results are useful, usable, accessible, or cost effective. That somehow people have DELUDED themselves into thinking any of the LIES about these frameworks has even the slightest glint of truth to it is outside my comprehension. Though to be fair I say the same thing about anti-vaxxers, foodies and creationists...They seem to make some really good Kool-aid these days.
So i understand, I started developing in C at the ripe age of 10. Being 30 now, i have in my eyes anyways a good amount of coding experience. The thing about development, is it is all about evolving. I agree with you about redundant code that some of these frameworks spew out - their surely would be more efficient ways to develop something similar. It is a fun thing to watch the industry jump on the jock of these frameworks and the crows follow; I have developed a lot of different sites, applications, scripts etc. however I enjoy using bootstrap or SOME CMS (not wordpress. site core then expression engine would be my favorites). With that said, you really cant beat a good ol' fashioned by scratch development job, so yes I agree with you on that statement. It is very interesting talking with people who have been developing as long as you though, I appreciate your knowledge and your information you pass along. At the end of the day, I do this job because I love to do it and as long as that remains true I will continue to develop sites with or without framework as long as the client and I am happy with the final result.
Agreed wholeheartedly -- it's one of my mantras; the day you stop learning is the day the rest of the world leaves you behind... But that's actually a good chunk of why many currently advocated practices bug me -- as to me they are simply mistakes of the past in a frilly dress. HTML 5 rubs me the wrong way for that reason, as from where I sit it just looks like everything that was wrong with HTML 3.2 and the oddball browser specific crap that made it's way into 4 tranny. It undoes all the progress of 4 STRICT and just seems to exist as a placebo for "higher number must be better" halfwits, as a sick buzzword to let places like SitePoint sell more of their scam artist books, and for the ignorant fools who think you can get sound IT advice from the pages of Forbes to banter about the water cooler like they did "web 2.0" and "SEO". Which again, taking IT advice from Forbes is like taking financial advice from Popular Electronics. It's called native development... and I'm not joking about that. As I said the biggest rub about these isn't just the raw size of said libraries, but that said libraries/frameworks result in writing MORE markup... how is that SIMPLER? BETTER? It isn't. At all. I mean, sure... CSS is difficult, but it's not rocket science; and to be frank the vast majority of websites have NO legitimate excuse to have more than 48k of CSS for the entire site per media target! -- which is why when I see sites with a dozen separate CSS files totalling hundreds of K, I can't help but think "what inept halfwit sleazed this together?" -- particularly when the markup it's mated to ends up with a CtC ratio (code to content) in excess of 10:1. There's actually a good guesstimate formula I use to determine just how crappy the markup is for a site... you figure out how much plaintext is present, how many CONTENT images (as opposed to presentational template images) or media objects (video, audio) there are, and plug it in thus: markup limit = 5K + plaintext size * 1.5 + 200 bytes per image/object/video/audio. You go past that, something is likely wrong. You more than double it, you have no business making websites... which is why it's mind-blowing when you see sites that go ten times those figures... even more mind blowing when they have the giant pair of donkey brass to claim it was "easier" that way. It is a fun thing to watch the industry jump on the jock of these frameworks and the crows follow; I have developed a lot of different sites, applications, scripts etc. however I enjoy using bootstrap or SOME CMS (not wordpress. site core then expression engine would be my favorites). With that said, you really cant beat a good ol' fashioned by scratch development job, so yes I agree with you on that statement. Sadly the past... five years or so I've soured on it -- the fun isn't there anymore as the sheer frustration factor has me ready to blow the last of my money on airline tickets to personally deliver pimp-slaps to developers worldwide like a second rate Jay and Silent Bob. Which is why I'm spending more and more time dialing the clock back and writing DOS games in machine language as at least back then it felt like I was accomplishing something. Thankfully being retired I can work on what I like and want instead of the disgusting "Yessir massa" Sambo impersonation that seems to be all most clients want anymore -- mated to their ridiculous expectations in turnover time and cost that also doom their projects to failure before they even start.