Display Bootstrap’s Navbar Dropdown Menu On Hover

DEMO

Using only 3 simple CSS rules, you can have your Bootstrap’s navbar menu dropdown display on hover seamlessly.  Below is the CSS code:

/* display dropdown menu on hover
   only when navbar is not in mobile mode (hamburger menu mode) */
@media (min-width: 768px) 
{
	/* display submenu on hover */
	.dropdown:hover .dropdown-menu {
		display: block;
	}

	/* since submenu gets displayed too when dropdown menu is clicked 
		and remains displayed until dropdown menu is clicked again,
		we need to hide submenu */
	.open > .dropdown-menu {
		display: none;
	}

	/* also dropdown menu is highlighted when clicked,
		so we need to unhighlight dropdown menu */
	.navbar-default .navbar-nav > .open > a, 
	.navbar-default .navbar-nav > .open > a:focus {
		background-color: transparent;
	}
}

Advertisements

Web Design: A Text Animation Exercise and More

With CSS3 transitions you can animate text as well as other elements in your web page without any JavaScript.  See my demo at http://rodansotto.com/projects/css/TransitionIAmTitanium.html (just move mouse to center box to animate text and outside box to return to original state).  In there I am also using a custom web font using CSS3 rule @font-face, HSL (or HSLA) to define color rather than using hex or RGB, text shadow, box shadow, radial gradient, repeating linear gradient, and viewport width and height to dynamically size my text and the other elements in the page.  Most of these CSS3 features may not be implemented yet in some browser versions but I tested this in Chrome and IE 11 and it works.  Below is the CSS code:

/*  see https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
	using web font from fontspring.com
	for more free web fonts, go to http://www.fontsquirrel.com/
*/
@font-face {
	font-family: 'linottesemibold';
	src: url('./fonts/Linotte-SemiBold-webfont.eot');
	src: url('./fonts/Linotte-SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/Linotte-SemiBold-webfont.woff2') format('woff2'),
		 url('./fonts/Linotte-SemiBold-webfont.woff') format('woff'),
		 url('./fonts/Linotte-SemiBold-webfont.ttf') format('truetype'),
		 url('./fonts/Linotte-SemiBold-webfont.svg#linottesemibold') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	/* fallback for browsers not supporting radial-gradient, like IE 9 and below */
	background-color: hsl(210, 30%, 90%);
	
	/* see https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient */
	background: radial-gradient(ellipse farthest-corner, white 70%, hsl(210, 30%, 80%) 100%);
}

.container {        
	/* using viewport width vw and height vh, see https://developer.mozilla.org/en/docs/Web/CSS/length */
	/* with IE 9 and probably below too, they seem to have a much larger viewport width and height */
	width: 90vw;
	margin-left: 5vw;
	height: 84vh;
	margin-top: 8vh;
	
	/* fallback for browsers not supporting linear-gradient or repeating-linear-gradient, like IE 9 and below */
	background-color: hsl(0, 0%, 62.5%);
	
	/* see https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient */
	background: linear-gradient(135deg, hsl(0, 0%, 25%), white 50%, hsl(0, 0%, 25%));
	
	/* see https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient */
	background: repeating-linear-gradient(to right, hsl(0, 0%, 25%) 0%, white 10%, hsl(0, 0%, 25%) 20%);
		
	border-radius: 2vw;

	/* see https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */
	box-shadow: 2vw 2vh 5vw 0vw black;
	
	/*border: 1px solid red;*/
}

.word {	
	padding-top: 2vh;
	padding-left: 32vw;
		
	/* see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions */
	transition: all 2s ease-out;
	
	/*border: 1px solid red;*/
}

.container:hover .word {
	padding-top: 50vh;
	padding-left: 10vw;
}

.letter {
	display: inline-block;
	font-family: 'linottesemibold' , Arial, Sans-Serif;
	
	/* using viewport sized typography, see https://developer.mozilla.org/en/docs/Web/CSS/length */
	font-size: 6vw;
	
	color: #262626; /* hex */
	
	color: rgb(38, 38, 38); /* RGB */
	color: rgba(38, 38, 38, 1); /* RGB with alpha transparency channel */
	/*  Alpha transparency channel - decimal value
		0 for completely transparent
		1 for completely opaque
	*/
	
	/*  see HSL color wheel: http://www.erinsowards.com/articles/2011/01/graphics/hsl-colors.png
		see HSL color picker: http://hslpicker.com/, it shows RGBA and hex too
	*/
	color: hsl(0, 0%, 15%); /* HSL */
	/*  HSL
		1st value: hue color
		2nd value: saturation (%) - higher for colorful appearance (not grayish-looking)
		3rd value: lightnexx (%) - 0% for black, 100% for white
	*/
	color: hsla(0, 0%, 0%, 1); /* HSL with alpha */	

	/* see https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow */
	text-shadow: hsla(0, 0%, 0%, 0.5) 0.5vw 0.5vh 0.5vw;

	/* see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions */
	transition: all 1s ease-in 1s;

	/*border: 1px solid red;*/
}

.letter_i {
	transition: all 2s ease-out 0s;
}

.letter_am {
	transition: all 1.5s ease-out 0.5s;
}

.container:hover .letter {
	font-size: 16vw;
	color: hsla(240, 100%, 50%, 1); /* blue */
	text-shadow: hsla(0, 0%, 0%, 0.5) 1vw 1vh 0.5vw;
}

.container:hover .letter_i {
	color: hsla(0, 100%, 50%, 1); /* red */
}

.container:hover .letter_am {
	color: hsla(120, 100%, 50%, 1); /* green */
}

Web Design: A Fluid Layout Exercise

fluidlayout

Using CSS media queries is one part of making your web site responsive but you are limited to specific viewports.  Having a fluid layout on top of that will greatly improve the responsiveness and makes it more future proof.  In CSS, you can implement a fluid layout by sizing your elements’ horizontal dimensions in proportion using percentage % rather than pixel px and your fonts’ sizes using relative measurement em.

When sizing using proportion, you need to know the context to which this measure is related to.  Say you set an element’s font size to 90%.  90% of what?  That what will be the context.  If you have defined a font-size in the closest containing element as 20px, then it will be 90% of 20px.

If you are converting a fixed width layout to a fluid layout, the general formula used is target divided by context. Say you have an element’s width set to 10px and the containing element’s width is 100px.  To convert, you divide 10px by 100px which gives us 10% and that will be the resulting element’s proportional width.

Images can be fluid too by taking the same logic as with the elements.  Also worth knowing is that you can set a maximum width that these images (and even elements) can go up to in case you don’t want them to get very, very big.

Another way of making images fluid is by resizing these images on the server before it is rendered to the browser.  This also saves bandwidth spaces for bandwidth challenged devices.  This I will not cover here.

Also, there is a rapid or quick way of making a web site fluid by using a grid system.  One example of a grid system is Bootstrap.  This I will not cover too.

For this exercise, I have 2 sites, one with non-fluid layout and another with a fluid layout.  Both of these use CSS media queries.  I only have listed below the fully commented CSS for the fluid layout web site.  The HTML source you can view from the browser and the non-fluid CSS should be the same name except for the CSS extension (*.css instead of *.html).

/*
	When converting from fixed width to fluid, 
	the general formula used is: divide target by context.
*/
body {
	font-family: Calibri;
	font-size: 100%;
	/*  16px is the default font-size for most browsers.
		It's equal to 1em and equal to 100%.
		16px will be the context for our proportional fonts.
	*/
}
div {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 0.50%; /* divide 5px by 960px */
	padding-right: 0.50%;
}
ul, p {
	margin-top: 0px;
	margin-bottom: 0px;
}
a {
	text-decoration: none;
}
h1 {
	font-size: 2.125em; /* divide 34px by 16px */
}
h2 {
	font-size: 1.1875em;
}
h2 span {
	color: Red;
	/*  The context for span is h2.
		span's pixel font size is 22px and h2's is 19px.
		So to get the proportional font-size of span, 
		we divide 22px by 19px, not 16px.
	*/
	font-size: 1.157em;
}
h3 {
	font-size: 0.75em;
}
/*  #wrapper width's pixel size is 960px.
	This will be the context for our proportional elements.
	Note that I did not exactly follow the formula's result
	to the decimal point.
	As long as it's approximate and everything tallies exactly to 100%
	of their containing element, it should be fine.
*/
#wrapper {
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	/*max-width: 960px;*/ 
	/* if you don't want to scale out beyond some point
	then set max-width */
}
#header {
	margin-right: 1%;
	margin-left: 1%;
	/*  For the width, divide 930px by 960px.
		But I rounded it to whole number for easy maintenance.
		Just need to make sure everything tallies to 100%.
		97% for the header content's width, 
		2% total for it's left and right margins.
		And don't forget we have padding of 1% total
		for both sides of a div.
		So that makes a 100%.
	*/
	width: 97%;
	background-color: #6FD7FF;
}
#navigation ul li {
	display: inline-block;
	margin-right: 2.5%;
}
/*  Note that the anchor tag does not have explicit context.
	So the right margin is moved to the containing li tag (above).
*/
/*#navigation ul li a {
	margin-right: 25px;
}*/
#sidebar {
	margin-left: 1%;
	float: left;
	background-color: #9FADE6;
	width: 20%;
}
#sidebar ul {
	margin-top: 10px;
}
#sidebar ul li ul li a {
	font-size: 0.875em;
}
#content {
	margin-right: 1%;
	float: right;
	width: 76%;
	background-color: #FFCDAF;
}
#footer {
	margin-right: 1%;
	margin-left: 1%;
	clear: both;
	background-color: #CC6444;
	width: 97%;
}
#footer p {
	font-size: 0.75em;
}
.art {
	width: 32.5%;
}

/*  Below are the breakpoints, 604px and 320px. */

/* I put addtl breakpoint here and set the page to fixed width
	so sidebar text won't wrap */
@media screen and (max-width: 665px) {
	#wrapper {
		width: 665px;
	}
}

@media screen and (max-width: 604px) {
	#wrapper {
		width: 99%;
	}
	#sidebar {
		width: 33%;
	}
	#content {
		width: 63%;
	}
	.art {
		width: 49%;
	}
}

/* I put addtl breakpoint here and set the page to fixed width 
	so sidebar text won't wrap */
@media screen and (max-width: 412px) {
	#wrapper {
		width: 412px;
	}
}

@media screen and (max-width: 320px) {
	#wrapper {
		width: 99%;
	}
	#sidebar {
		display:none;
	}
	#content {
		float: none;
		margin-left: 1%;
		width: 97%;
	}
	.art {
		width: 100%;
	}
}

Demonstrating the new HTML5 and CSS3 Features

Now that I have a public website with my own domain name, I decided to publish by web pages that demonstrate the new HTML5 and CSS3 features.  I will regularly update this post with links to my web pages.

HTML5:

  • Form Input Types
  • Canvas (and WebGL)
  • SVG
  • Video and Audio
  • Geolocation
  • Drag/Drop
  • Web Storage
  • Application Cache
  • Web Workers
  • SSE (and WebSockets)

CSS3:

  • Borders, Backgrounds, Gradients, Text Effects, and Fonts (Web Fonts)
  • 2D and 3D Transforms
  • Transitions
  • Animations
  • Multiple Columns
  • Flexi Box Model
  • User Interface