Cheesetoast » menu http://www.cheesetoast.co.uk Brain Food for Web Developers Mon, 07 Jul 2014 23:18:22 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.7 Fixed top menu that fades and shrinks when scrolled http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/ http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/#comments Mon, 07 Jul 2014 23:16:28 +0000 http://www.cheesetoast.co.uk/?p=1289 This top menu bar will stick to the top of the page, but when the user scrolls down the menu will shrink slightly and become semi-transparent. I used javascript to add a CSS class with a transition effect applied. HTML We start … Continue reading

The post Fixed top menu that fades and shrinks when scrolled appeared first on Cheesetoast.

]]>
This top menu bar will stick to the top of the page, but when the user scrolls down the menu will shrink slightly and become semi-transparent. I used javascript to add a CSS class with a transition effect applied.

See the Pen Shrink & Fading – Fixed Menu Bar by Graham Clark (@Cheesetoast) on CodePen.

HTML

We start with the html5 nav element with a fairly standard horizontal unordered list for the menu:

<nav>
  <ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
  </ul>
</nav>

CSS

nav {
  background: black;
  color: white;
  transition: opacity 1s ease;
  opacity: 1;

  height: 80px;
  line-height: 80px;
  width: 100%;

  position: fixed;
  top: 0;
  left: 0;
}
nav a {
  color: white;
  text-decoration: none;
}

nav:hover { opacity: 1 }

First I start by styling the visuals. The opacity is set to 1 with a CSS3 transition so that the changes are made smoothly.

The line-height is the same as the height of the nav bar, so that the text is vertically centered.

The position of the nav is fixed at the top left with a width of 100%.

Finally, I added a hover option that sets opacity to 1 again so the user can view the menu more clearly.

Next I’ll add the class that javascript calls when the user scrolls:

.scrolled {
  opacity: 0.7;
  height: 50px;
  line-height: 50px;
}

JAVASCRIPT (JQUERY)

$(window).scroll(function(){

  var scroll = $(window).scrollTop();

  if (scroll > 0 ) {
    $('nav').addClass('scrolled');
  }

  if (scroll <= 0 ) {
    $('nav').removeClass('scrolled');
 }

});

(Don’t forget to include jQuery if you’re using this code)

This code is pretty straight forward. As the user scrolls the function is called. The variable ‘scroll’ basically measures the amount of space from the top of the page to the top of the window, i.e. before you start scrolling the distance is 0.

Depending on the scroll amount, the javascript adds / removes the ‘scrolled’ class.

The CSS3 transitions will degrade gracefully and a lack of javascript support shouldn’t make anyone cry either. Hope this code has been of interest!

The post Fixed top menu that fades and shrinks when scrolled appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/fixed-top-menu-fades-shrinks-scrolling/feed/ 0
Add Custom Theme Options to WordPress Admin Menu http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/ http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/#comments Fri, 14 Sep 2012 20:53:33 +0000 http://www.cheesetoast.co.uk/?p=805 Learn how to add your custom options page to one of the existing Wordpress admin menus.
In this example I'll demonstrate how to create a simple options page that allows the user to add a telephone number which will be displayed in the top right corner of a site. Continue reading

The post Add Custom Theme Options to WordPress Admin Menu appeared first on Cheesetoast.

]]>
A custom theme menu under the 'Appearance' tab of the WordPress admin areaLearn how to add your custom options page to one of the existing WordPress admin menus.

In this example I’ll demonstrate how to create a simple options page that allows the user to add a telephone number which will be displayed on a theme.

Creating an options.php file

Although it’s possible to add the necessary code to your functions.php file, it’s considered good practice to keep your menu code in a separate file. This is especially true if you’re adding lots of options, since it keeps your code organized.

Create a new PHP file and name it options.php. You can either save it in your theme’s root directory ([Wordpress root] > wp-content > themes > [current theme]) or, if you have other important theme files, you can create a sub-folder called ‘library’ and save it there.

Now we need to make sure this new file is called by including the options in your functions.php file. Open up your functions file (located in [Wordpress root] > wp-content > themes > [current theme] > functions.php) and add the following code:

require_once ( get_template_directory() . '/library/options.php' );

Or if you’re using a child theme:

require_once ( get_stylesheet_directory() . '/library/options.php' );

Now you can populate your options.php file and it will be included by WordPress.

Writing your options.php file

Adding an options menu involves 3 main steps:

  1. Create a function that tells WordPress to build a new menu item.
  2. Register the function using a ‘hook’.
  3. Create a function that displays the contents of the options page.

1. Create the function that builds your menu

This step is fairly simple but very important. This is the function we’re going to use:

function add_custom_theme_options()  
{  
    add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function );  
}

The add_theme_page function will add our options page as a sub-menu to the ‘Appearance’ main menu. Here are the parameters for that function:

$page_title
The HTML title tag of the page.
$menu_title
The title of the page as displayed in the menu.
$capability
Used to determine which role the user requires to be able to use the menu.
$menu_slug
A unique name for this menu item.
$function
The name of the function called on to display the HTML code for your options.

Here is an example of the function is use:

function add_custom_theme_options()  
{  
    add_theme_page('Theme Options', 'Theme Options', 'manage_options', 'custom_options_slug','custom_theme_options');  
}

Read more about the add_theme_page() function.

2. Register the function

Now that we have our menu-creating function we need to add it to WordPress using a hook. Just add the following code:

add_action('admin_menu', 'add_custom_theme_options');

3. Create a function that displays the contents of the options page

We’re going to write the HTML code for the options page and put it in a function. This function is the one we called in step 2 so make sure you use the same name (in this case ‘add_custom_theme_options’).

function add_custom_theme_options()
{  
if ( !current_user_can( 'manage_options' ) )  {
	wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
}
?>
<div class="wrap">
<h2>Theme Options</h2>
<form method="post" action="options.php">
<?php wp_nonce_field('update-options'); // Security - used to validate source.
<p><strong>Tel No:</strong><br />
<input type="text" name="telno" size="15" value="<?php echo get_option('telno'); ?>" />
</p>
<p><input type="submit" name="Submit" value="Save Options" /></p>
<input type="hidden" name="action" value="update" />
<input type="hidden" name="page_options" value="telno" />
</form>
</div>
<?php } ?>

Now when you look in your admin area you’ll see your new sub-menu titled ‘Theme Options’ under the ‘Appearance’ menu. In the new options page you’ll see the form that we just wrote. You can use it to save the telephone number to the WordPress database.

Using the new options in your theme

Now that we have the telephone number saved we can use it in the theme.

<?php if (get_option('telno')){ ?>
<div id="telno">
<p>Tel: <?php echo get_option('telno'); ?></p>
</div>
<?php } ?>

If the telephone number has been saved in the options page then it will display it in the theme. Otherwise it will be left blank.

For more information on adding custom menus read the WordPress Codex.

The post Add Custom Theme Options to WordPress Admin Menu appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/add-custom-theme-options-wordpress-admin-menu/feed/ 0
CSS Horizontal Menu Bar with Icons http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/ http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/#comments Fri, 31 Aug 2012 17:36:39 +0000 http://www.cheesetoast.co.uk/?p=673 A great way to make your menu buttons more interesting is to add some icons. Adding graphics to a page can add a lot of character to your site and help draw attention to the navigation elements. Continue reading

The post CSS Horizontal Menu Bar with Icons appeared first on Cheesetoast.

]]>
Example of menu icons for "Home", "Services, "Products"

A great way to make your menu buttons more interesting is to add some icons. Adding graphics to a page can add a lot of character to your site and help draw attention to the navigation elements.

Update: Since this article is quite old now you might want to look at a newer one about CSS Sprites with Pseudo Elements.

First of all you’ll need some icons. There are loads of great sites to buy premium icons (Picto Foundry, Icon Jar, Glyphicons, & more). There are also a lot of free icon sets out there.

Grab yourself some icons and lets get to work on the code. We’ll start with the HTML for your menu. Here’s an example of a basic horizontal menu bar:

<nav id="main-menu">
     <ul class="nav-bar">
          <li class="nav-button-home"><a href="/">Home</a></li>
          <li class="nav-button-services"><a href="#">Services</a></li>
          <li class="nav-button-products"><a href="#">Products</a></li>
     </ul>
</nav>

Next up comes the CSS. First we create a simple horizontal menu:

#main-menu .nav-bar { list-style:none;}
#main-menu .nav-bar li { display:inline; padding: 0 10px; }

Now we customize the links:

#main-menu .nav-bar li a {
padding-left: 25px; /* Create padding on the left where the icon goes */
text-decoration: none;
text-transform: uppercase;
color: #333;
text-shadow: 1px 1px 1px #ccc;
}

Finally we add the icons.

.nav-bar .nav-button-home a { background:url("images/home.gif") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-services a { background:url("images/services.gif") no-repeat 0px -2px transparent; }
.nav-bar .nav-button-products a { background:url("images/products.gif") no-repeat 0px -2px transparent; }

Do you have any ideas on how create a great looking menu? Post a comment and let me know.

The post CSS Horizontal Menu Bar with Icons appeared first on Cheesetoast.

]]>
http://www.cheesetoast.co.uk/css-horizontal-add-icons-menu-bar/feed/ 0