Posts

Showing posts with the label howto

Sticky Nav Bars and Top-of-Page Jumpers

Ever visit a website where if you start to scroll then certain elements on a page will stick to a particular location, like a navigation bar that stays put at the top of the page? Sometimes even a link will also appear from a side of the document which allows the user to jump back to the top of the page with a single click. Well that's what this tutorial is about. In fact the concepts I'll be discussing can actually be taken a step further and you'll be able to create other "sticky" elements on your page (like a social media link list that can slide into view). With this walk-through I'm assuming you're somewhat familiar with jQuery and CSS, so as with pretty much all things jQuery please download the library if you want to try this for yourself. Overall this example is really easy, so even with minimal experience it should be a snap to get this working on your site. First let's take a look at how this works. Click here to view the example and ...

CSS Only Dropdown Menu that Works on Mobile Devices

Not only is it a full moon today, but it's also Friday the 13th. So it's only fitting that I tackle a scary topic: CSS only dropdown menus that work on mobile devices! Ok, so really it's not that scary and I'll try to make it as painless as possible... don't mind the machete. First off, it's nice to see what we're trying to accomplish. Because this example is geared for mobile type devices only you should be viewing this example on such a platform, or if you are using a desktop computer, pretend that you can only "tap": http://www.imrezbalint.com/blogexamples/csstargetmenu.html The actual presentation of the example is not critical; you can create your own design in pretty much whatever manner you wish. The focus here is that on a mobile device one can tap a menu to see the dropdown list that will then stay open until the user taps another menu item or the "Close Menu" option. Secondly, I have not bothered to create media queries ...