Author: Ryan Tvenge

I'm a web developer and co-owner of Hoverboard that makes cool stuff on the web.

Categories
Links of Interest

Article Roundup for 01.4.13

As I have been bookmarking more and more links over the past year, my blog is starting to look more like a Tumblr Blog. So, starting this week, I’m going to be only sending out one post a week (Fridays) for links. The links below will be repeats, but starting next week, there will only be one link post on Friday.

I’m always open to feedback, so let me know if you don’t like this.

Links

  1. Keeping Safari a secret
  2. Font Awesome 3.0 is out
    This really is a great free icon font that has a wide variety of icons.
  3. What’s Hot in 2013: Our Picks
  4. How to Create a Simple Multi-Item Slider
    Really cool effect!
  5. Learn CSS Layout
    Wish this was around when I was starting off with CSS.
  6. Toggling State in CSS
    Getting into the head of a web standards writer is pretty cool. Here is Tab’s proposal for toggling in CSS.
  7. Around friends and family using older browsers?
  8. What I Learnt Building Twitter Bootstrap
  9. Backup Strategy: “My Hard Drive Crashed…” (And What I Learned From It)
    Backup: If it doesn’t exist in two places, it doesn’t exist at all.
  10. How To Stay Up To Date on Web Technology // Speaker Deck
  11. Progressive JPGs: A New Best Practice
    You would think a smaller file size would be faster; not always aparently.
  12. Data Monday: Best of 2012
    Luke W’s Data Mondays always has great stuff. Here is the best DM in 2012.
  13. Opinion Column: The Inconvenient Truth About SEO
    “Remember, you shouldn’t be optimizing for search engines, you should be optimizing for users.”
  14. FooTable: a jQuery Plugin for Responsive Data Tables
    This is a very cool way to get tables working on mobile.
  15. 24 ways: Redesigning the Media Query
  16. CSS Click Events
    There’s a big discussion as to where “interaction” belongs, JavaScript or CSS. This article entertains the CSS side.
  17. Tools: CSS Baseline: The Good, The Bad And The Ugly
    This is something that is taught in Typography 101 and the print world uses everyday. So why is it so hard to do on the web?
  18. Dive into Flexbox
    Flexbox is going to be HOT! It’s only IE10+ right now though. I’m sure there is a polyfill out there somewhere though.
  19. WordPress Plug-in Self Deactivation | 10up
    Clever reason to deactivate your plugin. I already have a few plugins that are no longer needed with 3.5
  20. Everything we know about WordPress 3.5
Categories
Scripts

iOSifyMaps

In the iOS world, when you click on a Google Maps link, it opens in the native maps app. Let’s just do a quick hypothical. What if those maps links decided not to work anymore. I think the “maps:” href format is a little more future proof. I’ve written some JavaScript (note not jQuery) that changes these links to “maps:” formatting if and only if you are on an iOS device.

iOSifyMaps on GitHub

 

Categories
Uncategorized

The Web Ahead: My new favorite podcast

Jen Simmons is doing having some really great in-depth conversations with other Web Designers and Developers. It may not have the fancy intro music but the content is stellar. It sure makes mowing the lawn go a lot quicker.

Categories
Meetup Talks

Optimizing Your Site slides

Here are the slides from tonights Tulsa Web Devs meeting. This was just a quick 5 minute presentation.

Categories
Scripts Tutorials

CSS3 Drop Down Menus

Surprisingly enough, I haven’t seen that many drop-down menus online that have the following:

  • Still work without JavaScript (css-based)
  • tabbing through menus functional

So I thought I’d put my money where my mouth is. Here is the Ryan Tvenge rendition of Dropdown Menus.

The html

<ul class="nav fade">
	<li><a href="#">Regular Lists w/ 2 child ul's</a>
		<ul>
			<li><a href="#">Child Item 1</a></li>
			<li><a href="#">Child Item 2</a>
				<ul>
					<li><a href="#">Grandchild Item 1</a></li>
					<li><a href="#">Grandchild Item 2</a>
						<ul>
							<li><a href="#">Great-Grandchild Item 1</a></li>
							<li><a href="#">Great-Grandchild Item 2</a></li>
							<li><a href="#">Great-Grandchild Item 3</a></li>
						</ul>
					</li>
					<li><a href="#">Grandchild Item 3</a></li>
				</ul>
			</li>
			<li><a href="#">Child Item 3</a></li>
			<li><a href="#">Child Item 4</a></li>
			<li><a href="#">Child Item 5</a></li>
		</ul>
	</li>
	<li><a href="#">Div wrapped menu</a>
		<div>
			You can put any html in here you want
			<ul>
				<li><a href="#">Even Lists</a></li>
				<li><a href="#">Even Lists</a></li>
				<li><a href="#">Even Lists</a></li>
			</ul>
		</div>
	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	<li class="right"><a href="#">Right-Aligned Menu</a>
		<ul>
			<li><a href="#">Child Item 1</a></li>
			<li><a href="#">Child Item 2</a>
				<ul>
					<li><a href="#">Grandchild Item 1</a></li>
					<li><a href="#">Grandchild Item 2</a>
						<ul>
							<li><a href="#">Great-Grandchild Item 1</a></li>
							<li><a href="#">Great-Grandchild Item 2</a></li>
							<li><a href="#">Great-Grandchild Item 3</a></li>
						</ul>
					</li>
					<li><a href="#">Grandchild Item 3</a></li>
				</ul>
			</li>
			<li><a href="#">Child Item 3</a></li>
			<li><a href="#">Child Item 4</a></li>
			<li><a href="#">Child Item 5</a></li>
		</ul>
	</li>
</ul>
<h2>Vertical Menu</h2>
<ul class="nav vertical fade">
	<li><a href="#">Regular Lists w/ 2 child ul's</a>
		<ul>
			<li><a href="#">Child Item 1</a></li>
			<li><a href="#">Child Item 2</a>
				<ul>
					<li><a href="#">Grandchild Item 1</a></li>
					<li><a href="#">Grandchild Item 2</a>
						<ul>
							<li><a href="#">Great-Grandchild Item 1</a></li>
							<li><a href="#">Great-Grandchild Item 2</a></li>
							<li><a href="#">Great-Grandchild Item 3</a></li>
						</ul>
					</li>
					<li><a href="#">Grandchild Item 3</a></li>
				</ul>
			</li>
			<li><a href="#">Child Item 3</a></li>
			<li><a href="#">Child Item 4</a></li>
			<li><a href="#">Child Item 5</a></li>
		</ul>
	</li>
	<li><a href="#">Div wrapped menu</a>
		<div>

			Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

		</div>
	</li>
	<li><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	<li><a href="#">Item 5</a></li>
</ul>

The CSS

/* CSS Dropdowns */
.nav { clear: both; list-style: none; padding: 0; margin: 0; float: left; width: 100%; }
.nav.vertical { height: auto; }
.nav li { display: inline-block; float: left; position: relative; }
.nav li:hover, .nav li.hover { z-index: 1; }
.nav li li { display: block; float: none; }
.nav li a { display: block; }
.nav.vertical li { float: none; display: block; }
.nav ul, .nav div, .nav li:hover ul ul, .nav li.hover ul ul { position: absolute; left: -9999px; top: 0; opacity: 0; }
.nav.fade ul, .nav.fade div, .nav.fade li:hover ul ul, .nav.fade li.hover ul ul { transition: opacity .2s linear; -webkit-transition: opacity .2s linear; -moz-transition: opacity .2s linear; -o-transition: opacity .2s linear; }
.nav div ul { position: static; left: 0; opacity: 1; padding: 0; background: none; }
.nav li:hover ul, .nav ul li:hover ul, .nav li:hover div,
.nav li.hover ul, .nav ul li.hover ul, .nav li.hover div { left: 0; top: auto; height: auto; opacity: 1; }
.nav li:hover.right ul, .nav li:hover.right div,
.nav li.hover.right ul, .nav li.hover.right div { left: auto; right: 0; }
.nav li:hover.right li:hover ul, .nav li.hover.right li.hover ul { right: 250px; } 

.nav li.hover ul li.hover ul ul, .nav li:hover ul li:hover ul ul, .nav.vertical li:hover ul ul ul, .nav.vertical li.hover ul ul ul, .nav div ul { position: static; left: 0;
	/* box-shadow */-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}
/* Customizable Areas */
.nav { padding: 10px; margin-bottom: 20px; /* css3 */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
	/* Gradients */
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#d6d6d6 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#d6d6d6 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#d6d6d6 100%); /* W3C */
}
.nav div, .nav ul { width: 250px; background: #fff; color: #000; background: rgba(255,255,255,.9); padding: 10px;
	/* border-radius */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;	
	/* box-shadow */-moz-box-shadow: 0px 1px 4px rgba(0,0,0,.3); -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,.3); box-shadow: 0px 1px 4px rgba(0,0,0,.3);
}
.nav ul ul ul { background: none; padding: 0; }
.nav div { padding: 10px; }
.nav li a { padding: 10px;
	/* css3 */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}
.nav li a:hover, .nav li a:focus, .nav li a.highlight { color: #005488; padding: 9px; border: 1px solid #f4f287;
	/* gradients */
	background: #fffcc1; /* Old browsers */
	background: -moz-linear-gradient(top, #fffcc1 22%, #fffd8c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(22%,#fffcc1), color-stop(100%,#fffd8c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #fffcc1 22%,#fffd8c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #fffcc1 22%,#fffd8c 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #fffcc1 22%,#fffd8c 100%); /* IE10+ */
	background: linear-gradient(top, #fffcc1 22%,#fffd8c 100%); /* W3C */
}
.nav li div a, .nav li ul a { } 
.nav.vertical { width: 200px; }
.nav li ul li:hover ul, .nav li ul li.hover ul, .nav.vertical ul li:hover ul, .nav.vertical ul li.hover ul { left: 250px; top: 0; }
.nav.vertical li:hover ul, .nav.vertical li.hover ul, .nav.vertical li:hover div, .nav.vertical li.hover div  { left: 200px; top: 0; }

CSS3 Transition Fading Option

If you add a class of “fade” to the parent <ul>, this will add CSS3 faded transitions to the menus.

Right-Aligned Menus

If you want a menu to go be aligned to the right, add a class of “right” to that menu’s parent <li>.

JS Helpers

There is also an accompanying JS file that helps out with a few things:

  1. Menus show up when tabbing. If you tab through the site, the appropriate menus will pop up. This does not happen out of the box with :hover pseudo classes and css.
  2. The menus work in IE6. This was something I was struggling with for awhile. I decided to put this feature in, just because it was so easy to do. I usually try to stay away from IE6 fixes. What the script is actually doing is adding a “hover” class to any anchor that is hovered over. This code also helps out with the tabbing feature.
  3. Highlighting parent anchor. When you’re mouse is hovered over a menu, the parent anchor of that menu will add the “highlight” class to that anchor, which essentially gives it the hover styling.

Vertical Option

What would a drop-down menu be without a vertical option. If you add a “vertical” class to the parent <ul>, the menu will format vertically and the menus will fly out to the right rather than down.

Outstanding Bug

The one bug that really drives me nuts right now is the fading out of the CSS3 transitions. On the vertical and right-aligned menus, it is fading to a different postion, then off of the screen. If anyone can find a fix for this, I would love to hear it.

The Code

demo // download

Tvenge Design