Blogfreakz - Web Design and Web Development resources » Menu & navigation

Quicksand – Recorder and Filter

Marvin@Blogfreakz — Mon, 21 May 2012 01:55:21 +0000

Created by Jacek Galanciak, Quicksand allows you to organize and record items to make your search get easier.

Click on the image to find out how it works and download its file.

Incoming search terms for the article:

travel write for us

Create a Slick Menu Using CSS3

Marvin@Blogfreakz — Wed, 09 May 2012 06:14:50 +0000

Created by a web developer in the Philippines, here’s a great navigation menu tutorial that uses only CSS. View the DEMO, then click on the image to see how it is done.

Incoming search terms for the article:

Create a CSS3 Rotating Menu

Keith@Blogfreakz — Mon, 30 Apr 2012 08:54:52 +0000

Today’s featured CSS tutorial comes from a web designer and developer who goes by the name of Luky VJ, and the aforementioned tutorial is about creating a rotating menu. If you find the design kind of familiar it’s because it is actually a modified version of the menu from CSS3Create.

You can find the CODE and TUTORIAL on how to achieve the effect is written in French but don’t fret! With a little help from Google Translate you can now read it in English here.

Incoming search terms for the article:

WP-PageNavi

Marvin@Blogfreakz — Thu, 26 Apr 2012 06:10:03 +0000

Getting bored with those classic ‘Older Posts’ and ‘Newer Posts’ link navigators? Replace them with the WP-PageNavi by GamerZ and scribe. Because this plugin has wp_pagenavi () template tag, it generates stylish paginations that makes it look way cooler than the older and plainer links and you can get page buttons so users can directly go to the page they want to visit.

Click on the image to download the file.

Note: PHP5 is required since version 2.70

Install:

In installing it, you can do it automatically from the WordPress admin or manually:

After downloading the file on the link provided, unzip it and put wp-pagenavi folder in /wp-content/plugins/ folder
Activate it from the Plugins menu

Find calls to next_posts_link() and previous_posts_link() in your theme and replace them.

Below is the code that looks like that one in the Twentyten theme:

← Older posts', 'twentyten' ) ); ?>

→', 'twentyten' ) ); ?>

Change them to this:

Look for this if it’s for mutlipart pages:

Change it with this:

 'multipart' ) ); ?>

To configure, go to WP-Admin > Settings > PageNavi

In modifying its CSS style, copy pagenavi-css.css file from the plugin directory to your theme’s directory then do the changes there so you will not lose the mods when you update it. Another way is by unchecking ‘Use pagenavi.css?’ option from settings page then directly adding styles to your theme’s style.css file.

Incoming search terms for the article:

Louis Remi’s Amazing CSS Menu Effects

Keith@Blogfreakz — Tue, 24 Apr 2012 06:39:18 +0000

There’s this simple yet brilliantly designed menu created by one Louis Remi that caught my eye while I was looking for some design inspirations to feature here on Blogfreakz and well, seeing his amazing work sure compelled me to share it with you!

I admit that at first glance I didn’t notice anything special about it because of its simple design, but when I started hovering the mouse cursor over it, that’s how I found the magic behind it.

In the demo page, you can see pretty much all of the various menu effects that you can accomplish. One thing worth noting if you’re planning on using this is that there’s a “hardcoded” limit of items per submenu, so if you’re going to have any more or less than that, then you should remember to edit the Progressive Anim section of the CSS.

As for browser compatibility, it degrades gracefully in IE8, and whilst some of the effects use 3D transform (which only works in Webkit browsers), it’ll still degrade just the same for FireFox and other browsers as well.

If you have any questions about the code or wish to report any bugs, feel free to go to the author’s GitHub page and fork it.

Incoming search terms for the article:

Emulate Your Smartphone’s Screeen with Promptumenu

Keith@Blogfreakz — Fri, 13 Apr 2012 09:45:24 +0000

Web Developer Janis Zarzeckis created this cool jQuery plugin called Promptumenu that lets you create a window or a container wherein you can display your list items in a fashion similar to that of a smartphone’s home screen.

The plugin isn’t just about the looks, of course, but also the feel of interacting with the user interface. As Janis stated in his site, he preserved the dynamic experience of using a touchscreen device when he created the plugin. When a user opens the page on a mobile device like an Android, iPhone, iPod or iPad, he will be able to swipe with his fingers. And when viewing from a computer or a laptop, the plugin bases its action from the mouse movement via click and drag.

Setting up is simple: just indicate the parameters like the number of columns and rows, icon size, and the inertia, which controls the icon speed as it slides across the screen. For more details about Janis’ plugin, download links, and some live demos, CLICK HERE.

Incoming search terms for the article:

BoxyMenu – A Fast and Simple Link Box Navigation Menu

Keith@Blogfreakz — Wed, 14 Mar 2012 03:23:41 +0000

This is a fairly new plugin from the guys at EGrappler.com. It’s called BoxyMenu and it’s a navigation menu plugin that has a very unique design. Instead of having the usual submenu pop out and slide down below the hovered item, the item itself will scroll upwards, revealing the submenu underneath it.

Click on the image below to see it in action.

In the demo, you’ll find a pin at the top right corner of each box that you can click on to keep the submenu in plain sight. With a UI design that resembles sticky notes, the BoxyMenu would fit quite nicely in a business-themed website.

Grab the easy tutorial and download the source files now!

Incoming search terms for the article:

Create an Image Menu with jQuery

Marvin@Blogfreakz — Fri, 24 Feb 2012 03:52:40 +0000

The web developers at Maui Website Design have designed a dynamic image menu that allows you to navigate easily through any visual content with a Motools-inspired effect, powered by jQuery Javascript.

The menu’s main functions require a jQuery-compatible script, a valid XHTML, a Motools-like sliding effect, and it should be lightweight. It comes in two versions, the first of which you can view HERE.

Click on the image to download the source.

Step 1: HTML

Landscapes

People

Nature

Abstract

Urban

Step 2: CSS

.jimgMenu {

position: relative;

width: 670px;

height: 200px;

overflow: hidden;

margin: 25px 0px 0px;

.jimgMenu ul {

list-style: none;

margin: 0px;

display: block;

height: 200px;

width: 1340px;

.jimgMenu ul li {

float: left;

.jimgMenu ul li a {

text-indent: -1000px;

background:#FFFFFF none repeat scroll 0%;

border-right: 2px solid #fff;

cursor:pointer;

display:block;

overflow:hidden;

width:78px;

height: 200px;

.jimgMenu ul li.landscapes a {

background: url(images/landscapes.jpg) repeat scroll 0%;

.jimgMenu ul li.people a {

background: url(images/people.jpg) repeat scroll 0%;

.jimgMenu ul li.nature a {

background: url(images/nature.jpg) repeat scroll 0%;

.jimgMenu ul li.abstract a {

background: url(images/abstract.jpg) repeat scroll 0%;

.jimgMenu ul li.urban a {

background: url(images/urban.jpg) repeat scroll 0%;

min-width:310px;

Step 3: Javascript

Include jQuery and all plugin files listed in the header of your HTML file. It should look like this:

Include the jQuery in your attached file or page.

In the second version, kwicks are used to add functionality and help to the Sliding Image Menu animation. Get the DEMO and SOURCE here.

Step 1: HTML

Landscapes

People

Nature

Abstract

Urban

Step 2: CSS

(Adapted for kwicks)

.jimgMenu {

position:relative;

margin: 0px 0px 0px 50px;

padding: 0px;

width:475px;

height:200px;

overflow: hidden;

.jimgMenu ul {

list-style: none;

margin: 0px;

padding: 0px;

display: block;

height: 200px;

position: relative;

.jimgMenu ul li {

width: 95px;

float: left;

display: block;

overflow: hidden;

.jimgMenu ul li a {

text-indent: -1000px;

background:#fff repeat scroll 0%;

border-right: 2px solid #fff;

cursor:pointer;

display:block;

overflow: hidden;

height: 200px;

.jimgMenu ul li#landscapes a {

background: url(images/landscapes.jpg) repeat scroll 0%;

.jimgMenu ul li#people a {

background: url(images/people.jpg) repeat scroll 0%;

.jimgMenu ul li#nature a {

background: url(images/nature.jpg) repeat scroll 0%;

.jimgMenu ul li#abstract a {

background: url(images/abstract.jpg) repeat scroll 0%;

.jimgMenu ul li#urban a {

background: url(images/urban.jpg) repeat scroll 0%;

border-right-style: none;

Step 3: Javascript

Include the jQuery and all files below in the header section of your HTML.

The above code will activate jQuery Sliding Image Menu plugin. Lastly, place the script below in your html head or document body.

Take note that CSS controls most of the image menu’s style and if you want to customize the easing type and duration, use the jQuery easing plugin to achieve different sliding effects.

Incoming search terms for the article:

Create A Flashing Blue Menu With CSS

Keith@Blogfreakz — Mon, 20 Feb 2012 06:05:18 +0000

First off, don’t dismiss this menu design based on the screenshot image alone. Instead, click on the image below to view the impressive demo.

This cool navigation menu was created by 17-year old Felix Buhler, and it uses CSS3 keyframes property. To create the flashing effect, the menu’s attribute is simply changed from a static state to a hovered state and back again in just a short period of 200ms. Clever use of box-shadow gives it that pressed look.

To try it out on your own site, just follow the simple instructions HERE.

So far it works only in FireFox, Chrome, and Safari. Other browsers that don’t support animation and keyframes properties might have to wait for a while.

Incoming search terms for the article:

Build A WordPress Network Navigation Menu

Keith@Blogfreakz — Tue, 07 Feb 2012 08:39:10 +0000

WordPress 3.0 has allowed users to host multiple independent websites with just one feature called Multisite. It also lets you share settings, content, and code between websites within your network.

Kevin Leary has shared some of the hacks he did to perform the aforementioned abilities in one of his articles; one of them involves building a network navigation menu. Below is a snippet of the code:

Simply paste this in your theme’s functions.php file.

/**

* Build a list of all websites in a network

function wp_list_sites( $expires = 7200 ) {

if( !is_multisite() ) return false;

// Because the get_blog_list() function is currently flagged as deprecated

// due to the potential for high consumption of resources, we’ll use

// $wpdb to roll out our own SQL query instead. Because the query can be

// memory-intensive, we’ll store the results using the Transients API

if ( false === ( $site_list = get_transient( ‘multisite_site_list’ ) ) ) {

global $wpdb;

$site_list = $wpdb->get_results( $wpdb->prepare(‘SELECT * FROM wp_blogs ORDER BY blog_id’) );

// Set the Transient cache to expire every two hours

set_site_transient( ‘multisite_site_list’, $site_list, $expires );

}

$current_site_url = get_site_url( get_current_blog_id() );

$html = ‘

’ . “\n\n”;

return $html;

}

You can use it in your theme by calling its wp_list_sites() function.

// Multisite Network Menu

$network_menu = wp_list_sites();

if( $network_menu ):

Cool, huh? Find out more about the rest of his WordPress hacks here!