Solved

CSS sub menu on existing code

Posted on 2011-02-16
7
1,044 Views
Last Modified: 2012-06-27
I need to create a seb menu on  two on the menu items on this page:
http://eyelasik.austinfx.com

I am not exactly sure how to incorporate this with the current menu. Even though this is in Wordpress the menu is hard coded.

How do I add a drop down on the contat menu item?
0
Comment
Question by:jbrashear72
  • 3
  • 2
  • 2
7 Comments
 
LVL 8

Expert Comment

by:imantas
ID: 34912912
If you have no access to the source of the menu so you could alter it, then a workaround would be using javascript, but that isn't the best way. I'm not sure, but such an advanced platform like WordPress should have ability to edit such a simple thing. If not - I suggest moving your site somewhere where you have access to any part of it.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 34912926
Honestly we ca ignore that it is in wordpress. I just need to be able to add a drop down nav to part of the menu. I have complete access to the source.
0
 
LVL 8

Expert Comment

by:imantas
ID: 34913001
Try to search the web for "css drop down menu". Luckily your menu is already based on an unordered list (HTML UL tag) which is a base of most drop down menus, you'll then add some second level UL and CSS for them and you now have a drop down menu. Please make sure you remove "overflow-x/y: hidden" from your current menu root (UL tag) as your dropdown menu will be hidden otherwise.

I've reviewed one of tutorials here and it looks clear to me.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 500 total points
ID: 34913158
I just wrote an article for this, but I am waiting for it to be published. I will copy and paste it for you to review:

Wordpress Horizontal Drop-Down Menu


In this tutorial I will show you had to add a WordPress horizontal navigation menu to your theme. I have searched and searched for a good tutorial on creating a WordPress nav menu without adding a plug-in or using the SuckerFish menu. I couldn't find a good tutorial, so I decided to write one.

For this tutorial I am using the theme I built for the Experts Exchange article I wrote "Create Your Own WordPress Theme". This theme is very basic, I wanted to keep it simple for those without much or any WordPress experience. I thought it would also be a good opportunity to cover adding additional features to a WordPress theme. If you would like to use the theme to walk through this tutorial, you can get the code here:
Experts Exchange WordPress Theme Tutorial

This should work with any WordPress theme. If you are working on a live website, or one that is important I strongly recommend backing up the original theme files. If you run into any problems you will be able to restore the theme to it's original design.

1. GETTING STARTED:

Open the header.php file.
Find the current navigation menu for the theme in the header files.
Here are a few examples of what to look for:

<ul>
<?php wp_list_pages('exclude=17,38' ); ?>
</ul>

Open in new window


<ul id="nav">  
<?php wp_list_pages('title_li=&depth=1'); ?>  
</ul> 

Open in new window


It may look like this if the menu has been hard coded into the theme:
<ul id="menu-main">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

Open in new window


And here is what it looks like if you are using the EE-Tutorial Theme:
                <div id="nav">
                        <ul>
                                <?php wp_list_pages('title_li='); ?>
                        </ul>
                </div>

Open in new window


2. ADDING THE CODE TO THE HEADER.PHP

Once you have found the menu in your theme, select it and either delete it or replace it with this:

 <div id="nav">
<?php wp_nav_menu( array('menu' => 'main' )); ?>
                </div>

Open in new window

                       
Notice I included the <div id="nav"> div tag. This is important for when we style the navigation menu. The id="nav" is what we will use to add the CSS to the menu.

The code we just placed will allow us to use the WordPress 3.0 custom navigation feature. The WordPress nav menu gives you the opportunity to add custom pages to the navigation of your theme, or arrange it just about any way you want. The options will be available through your WordPress Admin area. Click on Appearance>Menus from the left side toolbar to view the settings. The navigation isn't ready to work yet, so you won't be able to add the Menu, so let's move to the next step.

3. MAKING THE MENU FUNCTIONAL:

To make the call to the nav menu work we need to add some functions to it.

NOTE: The functions.php file is where you can add additional functions to your theme. The functions.php file is one of the most useful parts of a WordPress theme for adding additional features. If the index.php and style.css files are the engine that runs WordPress, then the functions.php would be the "fuel".

If your theme has a functions.php file open it. If you are using the EE-Theme tutorial theme, or if your theme doesn't have a functions.php file, create a blank text file using the editor of your choice. If your theme has a functions.php file you will need to place the next piece of code after the current closing "?>" PHP tag at the very end of the functions.php file. If you are using the EE-Theme, or creating your own functions.php file you will just need to paste the following code and save the file as functions.php, then add the file to your themes directory.

Here is the code:
<?php
    add_theme_support( 'menus' );
function has_children() {
	global $post;
	$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
	return ($children) ? true : false;
}

function is_child() {
	global $post;
	return ($post->post_parent) ? true : false;
}
?>

Open in new window


What the code is doing:
1. add_theme_support( 'menus' ); : This adds the nav menu functionality to the theme, so we can register it in the header.php.

2. function has_children() {: THis part is checking to see if the page has any sub-pages. If it does it shows them if it doesn't then it stops checking.

3. function is_child() { : This is for displaying the Parent page of the child page you are on if it has one.

You can now add your menu from the Appearance>Menus section of your WP-Admin area. Name the menu Main, and add some Pages or Post's or Categories by selecting them using the check-boxes in the left side of the page and choosing add to menu. You can now drag and drop them into the order you want. Click Save Menu in the top right of the page.

NOTE: Your theme may say that your theme currently supports 0 custom menus, don't worry it will work. I don't know why I can't get it to say it supports the feature, but it still works. If you know what I can do to fix this, please reply to the tutorial comments and I will update the tutorial.

Now go to a page or post in your website to view the changes. It probably doesn't appear to be a drop-down menu at this time. We need to add some style to the menu to make it "drop-down".

4. ADDING STYLE TO THE DROP-DOWN MENU

Open your style.css file. You can either replace the current navigation css for the theme, or keep it and delete it later.

NOTE: Some themes use the same CSS to style the navigational menu and to style the sidebars or other lists for the theme. You should back-up the style.css file before changing anything "just in case".

Replace you themes navigation's css with , or add the following code:

a {
	color: #333;
}

#nav  {
        margin-left: 10%;
        margin-top:25px;
        position: relative;
        width: 62%;
        padding: 0; 
        background: transparent; 
}
#menu-main {
        top: 0;
	padding: 7px 6px 0;
	line-height: 100%;
        width: 90%;
}
#menu-main li {
	margin: 0 5px;
	padding: 0 0 8px;
	float: left;
	position: relative;
	list-style: none;
}
/* main level link */
#menu-main a {
	font-weight: bold;
        color:#0090ff;
	text-decoration: none;
	display: block;
	padding:  8px 20px;
	margin: 0;
}

#menu-main a:hover {
       color: white !important;
}

/* main level link hover */
#menu-main .current a, #menu-main li:hover > a {
	background: #d1d1d1;
	background: grey;
	background: transparent;
	color: #444;
	border-top: solid 1px #f8f8f8;
}
/* sub levels link hover */
#menu-main ul li:hover a, #menu-main li:hover li a {
	background: none;
	border: none;
	color: #666;
}
#menu-main ul a:hover {
	background: #0399d4 !important;
	color: #fff !important;
}
/* level 2 list */
#menu-main ul {
	background: #ddd; /* for non-css3 browsers */
	display: none;
	margin: 0;
	padding: 0;
	width: 185px;
	position: absolute;
	top: 35px;
	left: 0;
	border: solid 1px #b4b4b4;
}
/* dropdown */
#menu-main li:hover > ul {
	display: block;
}
#menu-main ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#menu-main ul a {
	font-weight: normal;
}
/* level 3+ list */
#menu-main ul ul {
	left: 181px;
	top: -3px;
}
/* rounded corners for first and last child */
#menu-main ul li:first-child > a {

}
#menu-main ul li:last-child > a {

}
/* clearfix */
#menu-main:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#menu-main {
	display: inline-block;
}
html[xmlns] #menu-main {
	display: block;
}
* html #menu-main {
	height: 1%;
}

/* rounded corners of first and last link */
#main-nav ul li:first-child > a {

}
#main-nav ul li:last-child > a {

}

Open in new window


Save the style.css file and upload it to your themes directory. Refresh a page or post on your website to view the changes. Play around with the CSS to change the color or placement of your themes new horizontal drop-down menu.

That wraps up this tutorial

You can view the theme live here:
http://wordpressexpression.com/wp/
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 34913164
NOTE:

To use this along-side your current menu, don't replace the code as I suggested in the article. Just add it and use the css to control the positioning. Use the WP Nav feature to add your new menu so you can control the pages.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35009656
I am a little confused. So I only need a drop down on one part of the menu. the proceedures.
here is the site:
http://www.eyelasikaustin.com/
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35009710
Here is were I am trying to add the drop down.
http://www.eyelasikaustin.com/testing-menu/
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now