Tag Archives: navigation

Create back and forward page navigation buttons for your website

Posted on October 1, 2011 by
No comments

Here are the codes that you can use to create back buttons and forward buttons for your website.

Create a back button

Copy and paste this code into your web page:

<form><input type="button" value="GO BACK " onclick="history.go(-1);return false;" /></form>

This will create a button with the words “Go back” on it.

You can use your own button (as opposed to the default button) by using this code:

<a href="#" onclick="history.go(-1);return false;"><img src="http://yourwebsite.com/images/back.png"></a>

And you could use simply text by using this code:

<a href="#" onclick="history.go(-1);return false;">Go back</a>

 

Create a forward button

In order to create a button that will take visitors forward a page, you use the same codes as above and simply change the number in parantheses.

<form><input type="button" value="GO FORWARD " onclick="history.go(1);return false;" /></form>

This will create a button with the words “Go forward” on it.

You can use your own button (as opposed to the default button) by using this code:

<a href="#" onclick="history.go(1);return false;"><img src="http://yourwebsite.com/images/forward.png"></a>

And you could use simply text by using this code:

<a href="#" onclick="history.go(1);return false;">Go forward</a>

 

In order to change the number of pages that the button takes you either forward or backward, simply change the number in parentheses to the number of pages you want people to go when they click it. For example:

<form><input type="button" value="GO FORWARD " onclick="history.go(3);return false;" /></form>

would take people forward 3 pages when they clicked the button.

 

Let me know if you run into any issues with this or have questions.

 

Note: these buttons/links require Javascript enabled in order to function.

Categories: HTML, Javascript | Tags: , , ,

A simple tabbed navigation menu created with CSS, HTML, and jQuery

Posted on August 29, 2011 by
2 comments

Here are the codes that I use to create a tabbed navigation menu for a website.

You can see a demo of the tabbed menu here.

First, copy and paste this block of code into your stylesheet:

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}

ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}

ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}

ul.tabs li a:hover {
background: #ccc;
}

html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}

.tab_content {
padding: 20px;
font-size: 1.2em;
color:#333;
}
Then, copy and paste this block of code into your web page where you want the tabbed menu to appear:
<ul class="tabs">
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab2">Second tab</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        Content of the first tab
    </div>
    <div id="tab2" class="tab_content">
       Content of the second tab
    </div>
</div>
Now, copy and paste this block of code into the <head> section of your web page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script>
Now, all you will need to do is style the menu the way you want and add your content to the different tabs.
Let me know if you have any questions or run into any issues with this.
Categories: CSS, HTML, jQuery | Tags: , , , , , ,

WordPress tricks: How to make navigation menu items automatically evenly spaced and centered

Posted on August 20, 2011 by
1 comment

Here is the method I use to create an automatically evenly spacing navigation menu in a WordPress website. This way, no matter how many or how little pages your navigation menu contains, the menu items will be evenly spaced and centered.

First, create a new menu in WordPress by logging into the dashboard and clicking Menus under Appearance in the sidebar. Add all of the pages that you want in the navigation menu to your new menu.

Next, you will need to call this new menu in your header.php file instead of the default pages menu. See my post – WordPress tricks: Using a manually created menu for your main navigation menu  - for instructions on how to do this.

Next, you will need to edit the stylesheet codes that affect your navigation menu.

First, add these codes to the <ul> styles for your menu:

width: 928px;
  text-align:justify;
  margin:0 auto;

Obviously, you will want to change the width in the code to whatever the width of your menu is.

Next, add these codes to the <li> styles of the menu:

display: inline-block;

Note: you will want to erase any “position” or “float” declarations for the <li> items.

Now, you need to create a new menu item and add it to your menu. Go back to Appearance > Menus and add a menu item called “filler” or “test” or whatever you want. We are going to style this menu item so that it does not actually appear in the menu so it doesn’t matter what it’s called.

Important: make sure your “filler” menu item is positioned as the last item in the menu! Even later on, when you add new items to the menu, be sure that the “filler” menu item is always the last item on the menu.

Now, after you save the menu, visit your website. You will see the “filler” menu item at the end of the navigation menu. The next thing you need to do is to find it’s menu item ID number. To do this, either right-click the item and select “Inspect element” to use Firebug or view the source of the page. Each <li> item in the menu has it’s own ID – <li id=”menu-item-###”>. You need to figure out the ID number of the “filler” menu item.

Once you know the menu item ID, go back to your stylesheet. Add this block of code to your stylesheet:

#menu-item-519 {
 width:100%;
    display: inline-block;
    height:0px;
}
#menu-item-519 a {
 display:none;
}
#menu-item-519 a:hover {
 display:none;
}

Replace the numbers “519″ in the block of code above with the actual ID number of your ”filler” menu item.

This code prevents the “filler” item from actually displaying in your menu.

This method to create an evenly spacing navigation menu to your WordPress site worked well for me but let me know if you have any issues or trouble at all.

I based this menu trick off of the information I found in this article - http://dr2ab.wordpress.com/2011/03/24/even-horizontal-spacing-of-menu-items-with-css/.

Categories: CSS, WordPress | Tags: , , , , , ,

WordPress tricks: Using a manually created menu for your main navigation menu

Posted on August 20, 2011 by
1 comment

Here is the method I use to call one of my manually created menus in WordPress as my main navigation menu.

First, you obviously need to create the menu and add the links you want to it. You can do this by logging into the dashboard and going to Menus under Appearance in the sidebar.

Once you have the menu created, go to Editor under Appearance in the sidebar.

Open the header.php template file.

Find the line of code that calls the default pages menu. It should look something like this:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

And replace it with this:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'menu' => 'main' )); ?>

Make sure you replace the word “main” in the code above with the name of the menu that you want to use for your main navigation menu.

 

Categories: PHP, WordPress | Tags: , , , ,

WordPress: Changing the default home page title in the navigation menu (Twenty-Ten theme)

Posted on February 6, 2011 by
2 comments

Today, while working on a WordPress website, I noticed that when I selected a static page of the site to be the home page, it automatically re-named the page “Home” in the navigation menu rather than keeping the original title of the page.

To solve this, I opened the functions.php file in the admin panel. Then I found this block of code:

function twentyten_page_menu_args( $args ) {
 $args['show_home'] = true;
 return $args;
}
add_filter( 'wp_page_menu_args', 'twentyten_page_menu_args' );

I erased that block of code and saved the file. Now the page shows the title I gave it in the navigation menu – problem solved!

Let me know if you are running into the same issue I was and this tip doesn’t help you, and I’ll try to help you.

Categories: WordPress | Tags: , , , , ,