Design It Up! is a feature which helps you learn handy little tricks to tweak up your blog. I have a special Design It Up! post for you today.
For the last month or so, I have had numerous requests for a drop down navigation menu. I have tried several different versions with no luck -- either they were too complicated or gave me various error messages. Thankfully, my google hunting has paid off, and I have discovered a rather simple version that should take about 30 minutes to get running.
Let's get started:
1.) Go to "Layout" - "Edit HTML." As usual, before making any large changes to your blog, it is a good idea to save a copy of your full template.
2.) Make sure that your "Expand Widget Templates" box is unchecked and search for:
</b:skin>
3.) Directly above this section, add in the following code:
.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
4.) Next, you will need to download this
zip file. You can go ahead unzip it because we will be using the .js file inside here in a few.
5.) Once you have the file, you will need to upload this file onto a server/web hosting site. Personally, I used
webs.com since it is a free site. The only downside to this site is the free account has limited bandwidth.
Information on setting up a web.com account:
To set up your account, you will have to pick a site address, create a password, and click on Create a Website. When you get to step 2, Select a Template for your Site, be sure and click Use Advanced (HTML) Mode.
Once your account is created, click on Edit My Site and Single File Uploader. You will need to upload the file here.
6.) Back in your "Edit HMTL" section, you will now need to search for
</head>
7.) Directly above this section, add in the following code:
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://your_upload _server_url/slidemenu_horiz.js' type='text/javascript'/>
For the bolded section, you will need to add in the link to your file. So for example, in my code, it looks like:
http://neverendingshelf.webs.com/slidemenu_horiz.js
8.) This is the last major step of the coding. Not so bad, huh? Now, search for:
<div id="'header-wrapper'">
9.) Directly after the ending you will add the below code. Here is an example of how my code appears so that you have an idea of what you are looking for:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='The Neverending Shelf (Header)' type='Header'/>
</b:section>
</div>
You will be inserting:
<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='http://www.theneverendingshelf'>Home</a></li>
<li><a href='http://www.theneverendingshelf.com/2009/07/about-me.html'>About</a></li>
<li><a href='#'>Folder 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://www.theneverendingshelf.com/2009/07/contact-me.html'>Contact</a></li>
</ul>
<br style='clear: left'/>
</div>
10.) At this point you can "Preview" your handy work. Please note that you still have a lot of editing to do to make it look how you want.
Editing:
If you want to change the appearance of the menu, you will need to change the
second set of coding. In this section, you can change colors, sizing of the width. Please note that when previewing the menu, its height may appear thicker than it actually is. Once you have everything set up, you may wish to "Save" just so that you have a true understanding of what changes may be needed.
________________________________
The
third set of coding will probably be the one that you will spend the most time on. I have already named some of the Titles for you with commonly used ones such as: Home, About, and Contact.
When adding a link, you will be replacing
# with your specific link. Please note that you
must keep the
' symbol before and after the link. Directly after the link, in
>< will be the area to change the Title.
For folders and sub items, this code has been set up to include a few of each. However, you can alter it by adding and removing code.
Your basic Title should look something like this:
<li><a href='http://www.theneverendingshelf.com/'>Home</a></li>
Folders will look like:
<li><a href='http://www.theneverendingshelf.com/2009/07/about-me.html'>About</a>
<ul>
<li><a href='http://www.theneverendingshelf.com/2009/08/review-policy.html'>Review Policy</a></li>
<li><a href='http://www.theneverendingshelf.com/2009/07/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='http://www.theneverendingshelf.com/2009/09/contest-policy.html'>Contest Policy</a></li>
</ul>
Notice that this code has the ending
</ul> and
</li>
If you receive any error messages when altering the code, odds are that you are missing one of these.
Setting up this drop down menu should not take you too long; however, editing it may. Just take your time and everything should turn out great!
____________________________________
Have any HTML questions that you would like featured in Design It Up? Shoot me an email at neverendingshelf@gmail.com.
*Web.com set up information courtesy of Amanda and Kevin
*Menu code courtesy of Blogger Resources
Email this post
