PDA

View Full Version : Help needed for Drop Down Tabs



LeSporty
02-18-2008, 12:56 PM
1) Script Title: Drop Down Tabs (5 styles)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem: I am new and not really a coder but like this functionality. I understood most (well nearly all needed) to set up the tabs. Only question I have is how do I use the downloadtabs.zip files. Do I upload them somewhere to use for my blog? Thanks.

LeSporty
02-18-2008, 04:10 PM
ThinkI sort of understand the codes a bit more more.Can someone please help.
I am referring to here:http://www.dynamicdrive.com/dynamicindex1/droptabmenu_dev.htm

The first few lines are:
<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<!-- CSS for Drop Down Tabs Menu #1 -->
<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />
</head>

Please help me understand:

1) am I supposed to upload these codes (dropdowntabs.js)to somewhere? I uploaded to a googlepages account but could not get a url link to it at all.

2) am I supposed to upload these codes (dropdowntabfiles/ddcolortabs.css) as well? I managed to upload these to a googlepages account and can get a url link

Thanks.

LeSporty
02-22-2008, 08:29 AM
After many trials, I still could not get this working. I would appreciate assistance from anyone to push this forward.

I am testing the codes in my testing blog which is structured the same as my running one- I just want to make sure I know all the pitfalls before putting them to my "live" one.

With the blog coding appended below, this is how the blog looks like:
http://travelandshoot.blogspot.com/

As is obvious I cannot get any dropdown menu at all.:mad:
=========================================

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
====================
:

:
:
:
:
body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

]]></b:skin>
<title>Dynamic Drive DHTML Scripts- DD Tab Menu Demo</title>

<script type="text/javascript" src="http://dynamicdrive.com/dynamicindex1/dropdowntabfiles/dropdowntabs.js">

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<!-- CSS for Drop Down Tabs Menu #1 -->
<link href='http://herbie48.googlepages.com/ddcolortabs.css' rel='stylesheet' type='text/css'/>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Travel&amp;Shoot (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Recent Comments' type='HTML'/>
<b:widget id='Profile2' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
<div class='ddcolortabs' id='colortab'>
<ul>
<li><a href='http http://travelandshoot.blogspot.com' title='Home'><span>Home</span></a></li>
<li><a href='http http://travelandshoot.blogspot.com' rel='dropmenu1_a' title=' First Galleries'><span>CSS</span></a></li>
<li><a href='http http://travelandshoot.blogspot.com' rel='dropmenu2_a' title=' 2nd Galleries'><span>Partners</span></a></li>
</ul>
</div>

<div class='ddcolortabsline'/>

<!--1st drop down menu -->
<div class='Second Galleries' id='dropmenu1_a'>
<a href='http://travelandshoot.blogspot.com/search/label/mountains'>Mountains</a>
<a href='http://travelandshoot.blogspot.com/search/label/people'>People</a>
<a href='http://travelandshoot.blogspot.com/search/label/photograph'>Photogrpahy</a>
<a href='http://travelandshoot.blogspot.com/search/label/seASia'>SEAsia</a>
<a href='http://travelandshoot.blogspot.com/search/label/sun'>Sun</a>

</div>

<!--2nd drop down menu -->
<div class='First Galleries' id='dropmenu2_a' style='width: 150px;'>
<a href=' http://travelandshoot.blogspot.com/search/label/China '>China</a>
<a href=' http://travelandshoot.blogspot.com/search/label/Europe '>Europe</a>
<a href=' http://travelandshoot.blogspot.com/search/label/funny '>Funny</a>
<a href=' http://travelandshoot.blogspot.com/search/label/galleries '>Galleries</a>
</div>

</body>
</html>

Thanks very much.