Javascript drop down menu

by blindbat1457 on March 21st 2011, 7:58 pm

First topic message reminder :

Wanted to add a drop down menu to my forum with javascript. I am not sure where to put the code or what the code exactly is.

Another quick question, is there a way to add a link to my navbar that shows 'profile' and when you click it, it goes to your profile and not your profile settings?

Please and thank you.

EDIT:
This the code I want.
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

by brenda on March 30th 2011, 11:17 pm

Hold on i will do it with text only. Will put up another picture.
Brenda

by brenda on March 30th 2011, 11:30 pm

ok another picture just text Example. You are making me work tonight Ha Ha.

by blindbat1457 on March 31st 2011, 12:08 am

@brenda wrote:ok another picture just text Example. You are making me work tonight Ha Ha.

Alright go ahead and toss me the code I will try it out. Smile

Also if anyone can figure out the one I posted I will gladly take the advice/help.

by brenda on March 31st 2011, 12:19 am

Just a question the code that you have trying in your forum have you put the following in the beginning:</style>and at the end of your code </body></html>
This could be your problem if you have not done this menus will not work.
Give it a try first.
Let me know how you get on.
Brenda

by blindbat1457 on March 31st 2011, 4:21 am

Green is the HTML
Red is the Javascript

CSS in Style Sheet

Spoiler:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="min-width" xml:lang="{L_LANG_HTML}" lang="{L_LANG_HTML}" dir="{S_CONTENT_DIRECTION}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB}>
<head>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="Content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />

<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />

{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>


<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>



<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});

switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;

case 'left':
break;

case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;

case 'right':
auto_dir = 'prev';
break;

default:
slid_vert = true;
}

$(document).ready(function() {

var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});

if (width_max > 0)
{
$('#fa_ticker_content').css('display','block');

$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});

if (slid_vert)
{
var height_max = h_perso;

$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );

$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}

$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>


<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
pm.focus();


report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
report.focus();


ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});

});


var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;



$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");

$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});

//]]>
</script>
{GREETING_POPUP}

<style>
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}

.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
</style>



<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
_gaq.push(["_trackPageview"]);

(function() {
var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>

</head>

<body>

<div id="hitskin_preview" style="display: block;">
<h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}

<span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>



<div id="login_popup" class="module main">
<div id="login_popup_title" class="main-head">
<div class="h3">{SITENAME}</div>
</div>
<div class="main-content">
{LOGIN_POPUP_MSG}
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button2" value="{L_LOGIN}" />
<input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
</div>


<a id="top" name="top" accesskey="t"></a>
<div class="minwidth_IE">
<div class="layout_IE">
<div class="container_IE">
<div id="pun-intro" class="clearfix">
<a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" border="0" /></a>
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="http://pwpclantheme.goo-board.com/f23-napoleon-s-pantaloons">Tutorials</a>
<ul class="subnav">
<li><a href="http://pwpclantheme.goo-board.com/t5-this-is-a-global-announcement">Sub Nav Link</a></li>
<li><a href="http://pwpclantheme.goo-board.com/f26-introduce-yourself">Sub Nav Link</a></li>
</ul>
<span></span></li>
<li>
<a href="#">Resources</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
<span></span></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


<div id="pun-title">{switch_h1.MAIN_SITENAME}</div>



<p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>

</div>
<div id="pun-head">
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/javascript">
$(document).ready(function(){$("ul.subnav").parent().append("<span></span>"); $("ul.topnav li span").click(function() {$(this).parent().find("ul.subnav").slideDown('fast').show();$(this).parent().hover(function() {}, function(){$(this).parent().find("ul.subnav").slideUp('slow');});}).hover(function() { $(this).addClass("subhover");}, function(){$(this).removeClass("subhover");});});
</style>
<div id="pun-navlinks">
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
</div>
<div id="search-box"><form method="get" action="/search.forum" id="search"><p class="nomargin"><input type="text" name="search_keywords" id="keywords" maxlength="128" class="inputbox search" value="Search..." onclick="if (this.value == 'Search...') this.value = '';" onblur="if (this.value == '') this.value = 'Search...';" /><input class="button2" type="submit" value="Search" /></p></form></div>
</div>
<div class="pun">

<div id="fa_ticker_block" style="padding-top:4px;">
<div class="module main">
<div class="main-content clearfix">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">

<li>{switch_ticker.ticker_row.ELEMENT}</li>

</ul>
</div>
</div>
</div>
</div>



<div id="fa_ticker_block" style="padding-top:4px;">
<div class="module main">
<div class="main-content clearfix">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">

<div>{switch_ticker.ticker_row.ELEMENT}</div>

</div>
</div>
</div>
</div>
</div>
</div>


<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="{ID_LEFT}">

{giefmod_index1.MODVAR}

<div style="height:{SPACE_ROW}px"></div>


</div>
<div id="main">
<div id="main-content">


</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

by blindbat1457 on March 31st 2011, 9:17 pm

by brenda on March 31st 2011, 11:21 pm

How did you get on, any luck. or do you want me to send you the code for my drop down menu. Will have to send you it through email as it might take up a lot of room on the forum. I will tidy it up a bit. If you tell me what colour background & text required.
Brenda

by sign da tits on April 1st 2011, 12:22 am

@brenda wrote:How did you get on, any luck. or do you want me to send you the code for my drop down menu. Will have to send you it through email as it might take up a lot of room on the forum. I will tidy it up a bit. If you tell me what colour background & text required.
Brenda

Use spoiler.

by blindbat1457 on April 1st 2011, 3:26 am

@sign da tits wrote:
@brenda wrote:How did you get on, any luck. or do you want me to send you the code for my drop down menu. Will have to send you it through email as it might take up a lot of room on the forum. I will tidy it up a bit. If you tell me what colour background & text required.
Brenda
Use spoiler.

http://pwpclantheme.goo-board.com/h1-pain-without-pleasure

Love how when I do it in HTML page it works but templates it is a pain in the ass.

I just need to position the codes the right way in overall_header. If someone would just tell me where to put them so that this will work this can be solved but apparently this is the wrong time to ask for any kind of support because no one except brenda is helping. I asked on here, webartz and creative-labz (which I know for a fact they are going to tell me they won't help since they have it as well)

by blindbat1457 on April 1st 2011, 3:45 am

This did not work.

by kirk on April 1st 2011, 4:00 am

see there are so many different ways and codes you can use.
So you just have to go with what you like best.

honestly i would not even use codes like that, but thats just me.

i keep it simple.
like on this page, this is one of the forumotion pages that will be in the magazine.
now the drop down bar is not completely ste up yet. but thats what i am using. it's nothing fancy but a easy code and dose it's purported.

so if you want the code to that i can give it to you.

http://www.forumsuccessors.com/h48-form-successors-formotion-page-one-draft

and the best thing is it wont interfere or slow things down, it's just a basic drop down menu code and easy to set up and use.

But other then that it would be all trial and error to test what you-like the best

by blindbat1457 on April 1st 2011, 4:07 am

Kind of wanted one like that or one like

www.forcg.com
Ankillien knows how to do this or what not but he is gone or something.

by kirk on April 1st 2011, 5:43 am

yeah the only way i know to do something like that is to create one custom using dreamweaver.. they are spry menus.

but the problem i am having with it is it would have to be uploaded to the server, and i cant do that on forumotiom i think????? lol

i'm not sure i ran into a couple snags. everything looks great and works in the program, but when i apply to a page it dont work... hahah

I'll see if i can figure it out i am a lil new to dreamweaver, so it's a lil crazy in there with certain things... lol

You can try to pm ankillien if you like,
also rono has a few good menus and directions on his test forum zone 3.
So you can pm him to and ask for the link or any help as well.

in the mean time i had a friend send me an updated tutorial for dreamwever cs5, the other one i tried was for cs4 version so that may be why i was unable to get it work properly.
so i will let you know.

So i dont expect you do understand all of this,but if i am able to get the thing to work right,
then i can just create one for you basically how ever you want it...

this vid has more on how a finished one would look

by blindbat1457 on April 1st 2011, 9:35 pm

Alright I PM'd Ankillien but I think he is away for a while.

I will bump this to see if anyone else knows.

by blindbat1457 on April 3rd 2011, 4:11 am

by blindbat1457 on April 3rd 2011, 7:29 am

Here is a photoshopped image of what I want some what

by brenda on April 3rd 2011, 3:00 pm

Here is a code for drop down Menus.What i surject you paste this code into wordpad or notepade and edit it. Good luck.
<style type="text/css">
body { padding: 3em; }

#cssm1 * { padding:0; margin: 0; font: 1em arial; }

#cssm1 { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; }

#cssm1 a { display: block; border: 1px solid #fff; background: #; text-decoration: none; padding: 3px 10px; }
#cssm1 a:hover { background: #; }

#cssm1 ul li, #cssm1 ul li ul li { width: 120px; list-style-type:none; }

#cssm1 ul li { float: left; width: 170px; }

#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 170px;
}

#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul {
display:block;
}

#cssm1:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 170px;
margin-top: -20px;
}

</style>
</head>
<body bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0" bgcolor="#ffffff"
vLink=#000080 v>
<div style="WIDTH: 930px; HEIGHT: 216px" id="cssm1">
<ul>
<li style="WIDTH: 129px; HEIGHT: 54px"><a href="http://Hyperlink here"><font
color=#000000>Links>></font></a>
<div align="center"></div></li>
<li style="WIDTH: 186px; HEIGHT: 122px"><a href="http://Hyperlink here"><font
color=#000000>Links to Forum </font></a>
<div align="center"></div>
<ul style="WIDTH: 170px; HEIGHT: 93px">
<li style="WIDTH: 186px; HEIGHT: 29px"><a href="http://Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div></li>
<li style="WIDTH: 186px; HEIGHT: 29px"><a href="http://Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div></li>
<li style="WIDTH: 186px; HEIGHT: 29px"><a href="http://Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div></li></ul></li>
<li style="WIDTH: 127px; HEIGHT: 95px"><a href="http://Hyperlink here"><font
color=#000000>Links </font></a>
<div align="center"></div>
<ul>
<li style="WIDTH: 127px; HEIGHT: 29px"><a href="http://Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div></li>
<li style="WIDTH: 127px; HEIGHT: 29px"><a href="http://Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div>
<ul>
<p align="center"> </p></ul></li></ul></li>
<li style="WIDTH: 175px; HEIGHT: 116px"><a href="#"><font
color=#000000>Links</font></a>
<div align="center"></div>
<ul style="WIDTH: 167px; HEIGHT: 88px">
<li style="WIDTH: 174px; HEIGHT: 29px"><a href="http://Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div></li>
<li style="WIDTH: 174px; HEIGHT: 29px"><a href="http://Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div></li>
<li style="WIDTH: 174px; HEIGHT: 29px"><a href="http://Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div></li></ul></li>
<li style="WIDTH: 280px; HEIGHT: 54px"><a href="mailto:Hyperlink here"><font
color=#000000>Links</font></a>
<div align="center"></div></li></ul>
<ul></ul></div>
<p align="center"> </p>
<ul></ul>
<div></div>
<div></div>
</body></html>

by blindbat1457 on April 4th 2011, 7:16 pm

Damn guess I am going to have to settle with something different from what I posted. Ankillien is away apparently.

by blindbat1457 on April 6th 2011, 10:17 am

by sindin on April 7th 2011, 8:40 am

Javascript drop down menu

by blindbat1457 on April 7th 2011, 9:22 am

@sindin wrote:Javascript drop down menu

Umm what?

Javascript drop down menu

Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu

Re: Javascript drop down menu