blogfreakz.com » Menu & navigation

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!

Incoming search terms for the article:

network menu in wordpress

10 Creative And Uniquely Designed Navigation Menus

Keith@Blogfreakz — Mon, 30 Jan 2012 14:47:48 +0000

A well-designed navigation bar leaves a good impression on first-time visitors. Here’s a list of navigation menu designs that would make you go “why didn’t I think of that?”

Small Stone Recordings – Here’s a perfect example of incorporating your site’s theme with the design. This immediately gives your site’s visitors an idea of what your site and business is all about.

Loodo – Now here’s a design that would appeal to anyone who enjoys playing traditional board games.

Fantasy Cartography – Talk about creating a site map! Here’s a very original approach in navigation menu design by Robin C. Kuprella. The areas of the site are linked directly on the home page map. Clicking on a link will change the content in the central content box.

Genes Sausage Shop – Here’s another good example of incorporating the site’s theme into the navigation menu design.

NickAd – This one may seem against every design principle of an effective navigation menu but it gets points for creativity and innovation. As one review site puts it, it’s “probably not the most practical menu available but certainly one of the coolest.” I agree; a first-time visitor may be caught off-guard by the seemingly unintuitive design but trust me, it will wow you.

CL Designz – The main navigation menu at the top of the page may not look like much but you will surely love and appreciate its secondary menu located on the right side. It is unique, fun and definitely practical.

Manic Design – This one’s definitely one of my favorites on this list. It is nicely positioned on the left and all of the options are always visible, animated, and best of all, responsive!

C & C Coffee – There’s just something visually pleasing and amusing about its fun Flash-based menu as it playfully dangles links from the top of the page.

Alexarts – True to its nature, this graphic arts site uses menu items that appeal to modern aesthetics that are also fun to interact with.

Tennessee Trains & Byways – Don’t let the discreet menu at the top of the page fool you — Tennessee Trains & Byways is in contention for the largest dropdown menu in the world. It manages to combine old-world elements with modern design, resulting in a charming and highly interactive menu and page layout.

Incoming search terms for the article:

creative navigation bar

Animated CSS3 Multilevel Menu with Transition

Marvin@Blogfreakz — Mon, 30 Jan 2012 08:06:45 +0000

Script-tutorials.com gives us this cool UL-LI-based multilevel menu, with transition and animation effect using CSS3. You can create this menu in 2 easy steps.

Click on the above image to view the demo.

You may also download the full pack HERE.
Step 1: HTML

Index.html

CSS3 multilevel menu with transition and animation | Script Tutorials

CSS3 multilevel menu with transition and animation

Back to original tutorial on Script Tutorials

Parent link #1

Sub #11

Sub #12

Sub #13

Sub #14

Parent link #2

Sub #21

Sub #22

Sub #23

Sub #24

Parent link #3

Sub #31

Sub #32

Sub #33

Sub #34

Parent link #4

Sub #41

Sub #42

Sub #43

Sub #44

Step 2: CSS

Css/menu.css

ul#nav {
    border: 1px solid #454545;
    display: block;
    height: 400px;
    margin: 0;
    padding: 15px;
    width: 160px;

    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -webkit-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;

    background: -moz-linear-gradient(#f1f7ff, #d9e1ec);
    background: -ms-linear-gradient(#f1f7ff, #d9e1ec);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f7ff), color-stop(100%, #d9e1ec));
    background: -webkit-linear-gradient(#f1f7ff, #d9e1ec);
    background: -o-linear-gradient(#f1f7ff, #d9e1ec);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f7ff', endColorstr='#d9e1ec')";
    background: linear-gradient(#f1f7ff, #d9e1ec);
}

@-moz-keyframes custom_effect {
    0% {
        background:rgba(255, 255, 255, 0.0);
        height: 60px;
    }
    33% {
        background:rgba(255, 255, 255, 0.0);
        height: 160px;
    }
    66% {
        background:rgba(255, 255, 255, 1.0);
    }
    100% {
        background:rgba(190, 220, 255, 0.8);
        height: 135px;
    }
}
@-webkit-keyframes custom_effect {
    0% {
        background:rgba(255, 255, 255, 0.0);
        height: 60px;
    }
    33% {
        background:rgba(255, 255, 255, 0.0);
        height: 160px;
    }
    66% {
        background:rgba(255, 255, 255, 1.0);
    }
    100% {
        background:rgba(190, 220, 255, 0.8);
        height: 135px;
    }
}
ul#nav li {
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -webkit-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;

    background-color:transparent;
    border: 1px solid #454545;
    display: block;
    height: 60px;
    line-height: 60px;
    margin-bottom: 15px;
    overflow: hidden;
}
ul#nav li:hover {
    -moz-animation-name: custom_effect;
    -moz-animation-duration: 0.4s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;

    -webkit-animation-name: custom_effect;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    background:rgba(190, 220, 255, 0.8);
    height: 135px;
}
ul#nav a {
    border-style: none;
    border-width: 0;
    color: #181818;
    cursor: pointer;
    float: left;
    font-size: 13px;
    font-weight: bold;
    line-height: 30px;
    margin-top: 100px;
    padding-left: 18px;
    text-align: left;
    text-decoration: none;
    text-shadow: 0 1px 1px #FFFFFF;
    vertical-align: middle;

    -moz-transition: all 0.1s 0.4s;
    -ms-transition: all 0.1s 0.4s;
    -o-transition: all 0.1s 0.4s;
    -webkit-transition: all 0.1s 0.4s;
    transition: all 0.1s 0.4s;
}

Incoming search terms for the article:

Image file errors after moving to new server?

Nancy — Fri, 11 Nov 2011 19:00:59 +0000

An Error Uploading After Server Move…

Say anyone of you Blogfreakz out there experienced this error when trying to upload an image?

I didn’t realize until after moving my blog onto a new server that, the directory on above image is pointing to the directory on my old server.

So here are the steps I followed to fix it :

Login to wordpress, on the Dashboard, go to Settings > Media
On the “Uploading Files” section, the “Store uploads in this folder” option shows the old setting.
3. Next we need to change it to the default setting: wp-content/uploads

4. Then don’t forget to Save Changes.

Now the error disappears and I’m able to finally upload the image!

Incoming search terms for the article:

How to disable the admin bar in wordpress

Nancy — Wed, 21 Sep 2011 00:12:16 +0000

What is WordPress Admin Bar ?
- This is a toolbar that appear in the top of your blog when your status is in login session.

If you are of the category that find that new admin bar a bit intrusive… you can now disable it!

- Login into wordpress admin panel

- Click Users >> Your Profile

In this page, you can find Show Admin Bar, you can simply uncheck when viewing site
Please take a screen shot below :

Don’t forget to click the Update Profile !

Note :
This tutorial will work if you have installed wordpress by yourself in your hosting site.
If you can’t find “Show Admin Bar” in the Profile area, then you are hosting your site in wordpress.com

Incoming search terms for the article:

DropKick – jQuery Plugin For Creating Custom Dropdown Menus

Mufti Ali — Thu, 07 Jul 2011 04:37:59 +0000

Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation.

DropKick works by transforming your existing, boring value is updated. This means that your forms and AJAX requests should work the same without having to make any changes.

Features

Keyboard Navigation
Themeing
Custom Callbacks

Opened DropKick menus on Internet Explorer 7 will be covered by other DropKick containers if they are vertically stacked and too close together.

Requirements: jQuery Framework
Demo: http://jamielottering.github.com/DropKick
License: MIT LIcense

Incoming search terms for the article:

Unicodinator – Visually Navigating Through Unicode

Mufti Ali — Thu, 02 Jun 2011 09:41:28 +0000

Unicodinator is a tool for visually navigating through the Unicode blocks and codepoints from 0000 through DFFF. It can be used to identify a particular character, understand the various Unicode blocks, find shapes to use in non-image icons, or simply to enjoy the beauty of human writing forms.

The following libraries where used to create this application:

Mustache.js
Jquery

Requirements: -
Demo: http://unicodinator.com
License: Free License

Incoming search terms for the article:

Kaiten – New Navigation Model For Web Application

Mufti Ali — Sat, 14 May 2011 06:46:01 +0000

Kaiten is a jQuery plug-in which offers a new navigation model for web applications. Unlike conventional applications where the screen flush another without continuity between information and actions, with Kaiten interactions between the user and the application are a stack of contiguous screens where each screen is presented in columns.

The new navigation model of Kaiten brings application experience to a new level of continuity. When the user browses through the application, the screens (or “panels”) are stacked horizontally in columns, forming a visual continuum keeping intact the visual links between the different step of the usage of the application. All the panels stay in sight or in the breadcrumb: you can go back and forth without having to reload anything. The applications are simple, intuitives, easy to use (each panel provide contextual actions), and comfortable (no reloading, everything in sight).

The columns adapt themselves to the screen resolution: if the screen is small like on an android phone or on a iPad, Kaiten will reduce the number of column visible on the screen. If the screen is normal (laptop) or extra-large (a 30″ or more), Kaiten will add columns to provide a maximal comfort to the user.

Requirements: jQuery Framework
Demo: http://kaitenbrowser.com
License: GPLv3 License

Incoming search terms for the article:

Mega Drop Down Menu Plugin for jQuery

Mufti Ali — Fri, 11 Mar 2011 03:34:23 +0000

Mega Drop Down Menu is plugin for jQuery to create mega drop down menu. The Mega Drop Down Menu plugin takes standard nested lists and turns them into horizontal mega menus. A mega menu has several advantages over standard drop down menus, including:

All options visible at the same time
No scrolling and tricky mouse manoeuvres to see sub-menus fly out
Using standard nested lists the groups can be easily structured and formatted with CSS

To get the full effect of the plugin use 3 levels of nested lists. To initialise the mega menu with the default settings – 3 sub menus per row and fade in speed of “fast” – use the following code:

jQuery(document).ready(function($) { jQuery('#mega-menu').dcMegaMenu(); });

The download zip file also comes with 8 different skins giving an example of more advanced styling. To use one of these skins wrap the mega menu in a div tag and assign the div with a class to match the skin name – e.g class=”black” and the mega menu ul tag with class=”mega-menu”. Then add the relevant css file to the head of the document.

Requirements: jQuery framework, hoverIntent plugin
Demo: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/
License: MIT and GPL licenses

Incoming search terms for the article:

Simple jQuery One Page Navigation Plugin

Mufti Ali — Sun, 03 Oct 2010 14:15:14 +0000

One Page Navigation is a lightweight jQuery plugin for the navigation on one-page sites. This plugin allow us to scroll page smoothly when the navigation was clicked, it’s use the jQuery ScrollTo plugin. The page also automatically highlight the correct navigation section depending upon which section was scrolled to.

There are a few options for this plugin:

currentClass: ‘current’

Class to add to the list item when the navigation item is selected
changeHash: false

If you want the hash to change when the user clicks on the navigation, change this to true
scrollSpeed: 750

Speed to scroll the page when the navigation is clicked

Requirements: jQuery Framework
Demo: http://trevordavis.net/play/jquery-one-page-nav
License: License free

blogfreakz.com » Menu & navigation

Build A WordPress Network Navigation Menu

Incoming search terms for the article:

10 Creative And Uniquely Designed Navigation Menus

Incoming search terms for the article:

Animated CSS3 Multilevel Menu with Transition

CSS3 multilevel menu with transition and animation

Incoming search terms for the article:

Image file errors after moving to new server?

Incoming search terms for the article:

How to disable the admin bar in wordpress

Incoming search terms for the article:

DropKick – jQuery Plugin For Creating Custom Dropdown Menus

Features

Incoming search terms for the article:

Unicodinator – Visually Navigating Through Unicode

Incoming search terms for the article:

Kaiten – New Navigation Model For Web Application

Incoming search terms for the article:

Mega Drop Down Menu Plugin for jQuery

Incoming search terms for the article:

Simple jQuery One Page Navigation Plugin

currentClass: ‘current’

changeHash: false

scrollSpeed: 750

Incoming search terms for the article: