Here is the Javascript that I use to display a second drop-down menu or a div based on a user’s selection in the first drop-down menu.
Read more …
Tag Archives: menu
Javascript: Display a second drop-down menu or div based on user’s selection in first drop-down menu
Posted on July 26, 2012 by Libby Fisher
Concrete5: Display the page title of the top parent menu item on sub pages
Posted on April 20, 2012 by Libby Fisher
Here is the block of code I use to display the page title of the top parent menu item on a sub (or child) page of that menu item.
Copy this code:
<?php
$title = $c->getCollectionName();
$parentPageId = $c->getCollectionParentID();
if ($parentPageId > 1) {
$parentPage = Page::getById($parentPageId);
$title = $parentPage->getCollectionName();
}
?>
<h1><?php echo $title; ?></h1>
And paste it into the template where you want the parent item page title to appear.
Using this code, the page title of the top-level menu item relative to the page the viewer is on will always be displayed. For example, if this were your site map:
Home
About
History
Mission
Contact
Directions
Contact Us
Using the code above, you could display the page title About when you are on the History page or the Mission page, and the page title Contact when you are on Directions or Contact Us.
A simple tabbed navigation menu created with CSS, HTML, and jQuery
Posted on August 29, 2011 by Libby Fisher
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/ "></script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").jquery.min.js 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.
WordPress tricks: How to make navigation menu items automatically evenly spaced and centered
Posted on August 20, 2011 by Libby Fisher
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/.
WordPress tricks: Using a manually created menu for your main navigation menu
Posted on August 20, 2011 by Libby Fisher
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.
Interspire Shopping Carts: Add a Flyout or Dropdown Menu to Sidebar Panel
Posted on May 8, 2011 by Libby Fisher
Here is the easiest way I have found to add flyout or drop down menus to a particular panel in an Interspire shopping cart’s template.
First, sign into the website’s admin panel.
Go to Settings -> Store Settings -> Display.
In the box next to Category List Depth, change the number to the number of levels you want to display in the flyout or drop down menu.
Now, go to Store Design and then click Browse Template files.
In your website template’s style.css file, add this code:
.Left #SideCategoryList li:hover, .CategoryList li:hover, .CategoryList li.Over {
background: #746755;
}
.Left #SideCategoryList li:hover a, .CategoryList li:hover a {
color: #fff;
}
.Left #SideCategoryList li ul, .CategoryList li ul {
display: none;
padding: 0 0 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
width: 160px;
position: absolute;
}
.Left #SideCategoryList li:hover ul, .CategoryList li:hover ul {
display: block;
position:absolute;
margin-top:-15px;
left:160px;
width:160px;
}
.Left #SideCategoryList li:hover li, .CategoryList li:hover li {
float: none;
background: #f0eee8;
}
.Left #SideCategoryList li:hover li a, .CategoryList li:hover li a {
color: #444;
font-size: 14px;
text-transform: none;
font-style: normal;
border-top: 1px solid #f0eee8;
border-bottom: 1px solid #f0eee8;
}
.Left #SideCategoryList li li a:hover, .CategoryList li li a:hover {
background: #746755;
color: #fff;
border-color: #fefaf3;
}
.Left #SideCategoryList li:hover, .CategoryList li:hover {
background: #746755;
}
.Left #SideCategoryList li:hover a, .CategoryList li:hover a {color: #fff;}
.Left #SideCategoryList li ul, .CategoryList li ul {display: none;padding: 0 0 9px 0;-moz-border-radius-bottomleft: 17px;-moz-border-radius-topright: 17px;-webkit-border-top-right-radius: 17px;-webkit-border-bottom-left-radius: 17px;width: 160px;position: absolute;
}
.Left #SideCategoryList li:hover ul, .CategoryList li:hover ul {display: block;position:absolute;margin-top:-15px;left:160px;width:160px;
}
.Left #SideCategoryList li:hover li, .CategoryList li:hover li {float: none;background: #f0eee8;}
.Left #SideCategoryList li:hover li a, .CategoryList li:hover li a {color: #444;font-size: 14px;text-transform: none;font-style: normal;border-top: 1px solid #f0eee8;border-bottom: 1px solid #f0eee8;}
.Left #SideCategoryList li li a:hover, .CategoryList li li a:hover {background: #746755;color: #fff;border-color: #fefaf3;}
This code will add a flyout menu to the Category panel in the left sidebar of your website. You can change the name of the panel in the codes if you want to apply the flyout menu to another panel.
Next, you will want to edit the styles above to match the design of your own site.
And that’s all you need to create flyout or dropdown menus for the sidebar of your Interspire shopping cart template!
Let me know if you run into any issues or have any questions.
You can also learn how to create your own custom panels for Interspire shopping carts in another post I wrote.
All-Time Popular Posts
- CSS Tricks: Use two background images for one div
- How to create a coupon discount for PayPal buttons
- Using two background images for one div in IE
- A simple tabbed navigation menu created with CSS, HTML, and jQuery
- Website forms: Use Javascript to auto fill one field with the values from two other fields
Today's Popular Posts
Recent Posts
- WordPress Tricks: Use a WordPress query to exclude a category from your home page without breaking pagination
- WordPress Tips: How to remove the extra space between LI elements from wp_nav_menu
- WordPress Tricks: How to Show Most Recent Posts from Specific Categories with Thumbnails
- Joomla Tips: How to assign body IDs to each page
- Javascript Trick: Add a class or ID to an HTML element on hover
- PHP Tips: How to send an email through a contact form to multiple recipients
Archives
Categories