WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

Go to page : Previous  1, 2

View previous topic View next topic Go down  Message [Page 2 of 2]

1Accespted Drop Down Menu Selector Thu Dec 17, 2009 5:58 pm

Sanket

Sanket
Administrator
Administrator
First topic message reminder :


Drop Down Menu Selector
A basic tutorial for a drop down menu selector



This tutorial is a basic Drop Down Menu Selector.

Code:
<form name="jump">
<p align="center">
<select name="menu">
<option value="http://arsenal.com">Arsenal</option>
<option value="http://hitskin.com">Hitskin</option>
<option value="http://help.forumotion.com">Support Forum</option>
<option value="http://forumotion.com">Forumotion</option>
<option value="http://webartz.forumotion.com">WebArtz</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</p>
</form>

Click Here to see a Demo of the Drop Down Menu Selector

To make modifications to the code just edit or add the example of the code given below
Code:
<option value="http://webartz.forumotion.com">WebArtz</option>

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by Sanket on Thu Dec 17, 2009 6:02 pm; edited 1 time in total

http://www.webartzforum.com

26Accespted Re: Drop Down Menu Selector Wed May 12, 2010 12:13 am

Niels


Registered Member
Registered Member
Bump.

27Accespted Re: Drop Down Menu Selector Wed May 12, 2010 2:54 pm

ankillien

ankillien
Administrator
Administrator
Rehua wrote:Ah, okay. I was giving an example of how it should look like.
Click here for a script

Thanks!

This script is not very flexible. It can mess up if you add more than one menu Razz
Do you want drop-down for only one menu item or more?

28Accespted Re: Drop Down Menu Selector Thu May 13, 2010 2:07 am

Niels


Registered Member
Registered Member
Well, only one drop down box, with a few menu items.
Like on the site of Adobe.

(http://adobe.com)

29Accespted Re: Drop Down Menu Selector Thu May 13, 2010 10:25 am

ankillien

ankillien
Administrator
Administrator
Ok, I've figured it out.

Please navigate to the overall_header_new template and add this code right before the closing head tag </head>...

Code:
<link href="LINK TO CSS FILE" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="LINK TO JAVASCRIPT FILE"></script>
<script type="text/javascript">
$(document).ready(function () {
   $("ul.menu_body li:even").addClass("alt");
    $('a.menu_head').click(function () {
   $('ul.menu_body').slideToggle('medium');
    });
   $('ul.menu_body li a').mouseover(function () {
   $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
   $('ul.menu_body li a').mouseout(function () {
   $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

Note that you need to upload the CSS and JS files to your web host and then link them to the code.

Now, find this part in the code...

Code:
<tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>

Put the following code right after that...

Code:
<td><div class="container">
<a href="#" class="menu_head" />Drop Down</a>
<ul class="menu_body">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div></td>

You can customize the above code as per your needs.

Save the template ,publish it and see if it works.

30Accespted Re: Drop Down Menu Selector Sat May 15, 2010 5:28 pm

Niels


Registered Member
Registered Member
Thanks! It works, I'll just have to add some design to it.
And, when reloading the page, it starts with the box opened. Could you make it so when I reload the page it starts with the box closed?

31Accespted Re: Drop Down Menu Selector Sat May 15, 2010 11:19 pm

ankillien

ankillien
Administrator
Administrator
By default the box should be closed.
I'll check it. Can you provide me a link to your site?

32Accespted Re: Drop Down Menu Selector Sun May 16, 2010 5:27 pm

Niels


Registered Member
Registered Member
http://vocatrem.forumotion.com/forum.htm
Ignore the way it looks right now. i'm busy editing it.

33Accespted Re: Drop Down Menu Selector Sun May 16, 2010 7:41 pm

ankillien

ankillien
Administrator
Administrator
Hi!

I looked in your codes. It looks like this...

Code:
<a href="#" class="menu_head"><img src="http://img693.imageshack.us/img693/4156/80000216.png"></a>

Please try replacing it with this code...

Code:
<img class="menu_head" src="http://img693.imageshack.us/img693/4156/80000216.png">

I just removed the <a> tag and applied class "menu_head" to the <img> tag. This change should fix the bug, I think Very Happy

34Accespted Re: Drop Down Menu Selector Sun May 16, 2010 7:54 pm

Niels


Registered Member
Registered Member
:S. It didn't, now it's just not clicky anymore.

35Accespted Re: Drop Down Menu Selector Sun May 16, 2010 10:38 pm

ankillien

ankillien
Administrator
Administrator
Oh sorry!
I forgot to mention one more change needed to make in the templates.

You have this code in the template before the </head> tag...

Code:
<script type="text/javascript">
$(document).ready(function () {
  $("ul.menu_body li:even").addClass("alt");
    $('a.menu_head').click(function () {
  $('ul.menu_body').slideToggle('medium');
    });
  $('ul.menu_body li a').mouseover(function () {
  $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
  $('ul.menu_body li a').mouseout(function () {
  $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

Please replace it with this one...

Code:
<script type="text/javascript">
$(document).ready(function () {
  $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
  $('ul.menu_body').slideToggle('medium');
    });
  $('ul.menu_body li a').mouseover(function () {
  $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
  $('ul.menu_body li a').mouseout(function () {
  $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

Hope this helps Very Happy

36Accespted Re: Drop Down Menu Selector Sun May 16, 2010 10:46 pm

Fred100

Fred100
Registered Member
Registered Member
I have a question after reading and going through the codes , and couldn't find what I wanted to so , is it possible to add another drop down menu selector?
I mean not a second one , but in another design?

http://www.art-castle.biz/forum.htm

37Accespted Re: Drop Down Menu Selector Sun May 16, 2010 11:09 pm

ankillien

ankillien
Administrator
Administrator
Fred100 wrote:I have a question after reading and going through the codes , and couldn't find what I wanted to so , is it possible to add another drop down menu selector?
I mean not a second one , but in another design?

Yes, you can add other design or other script if you want.

38Accespted Re: Drop Down Menu Selector Mon May 17, 2010 4:22 am

Fred100

Fred100
Registered Member
Registered Member
Wow that's cool , it'd be awesome to see how or which codes to add to do so Razz

http://www.art-castle.biz/forum.htm

39Accespted Re: Drop Down Menu Selector Mon May 17, 2010 8:17 am

ankillien

ankillien
Administrator
Administrator
Fred100 wrote:Wow that's cool , it'd be awesome to see how or which codes to add to do so Razz

There are lots of drop-down menu scripts available on internet. You can make a google search for "drop down menu script" and find a script the suits your need. Once you find it, give me the link to it and I'll help you to install in in your forum Very Happy

It can be added in the forum header template.

40Accespted Re: Drop Down Menu Selector Tue May 18, 2010 1:29 am

Niels


Registered Member
Registered Member
Nope. It didn't.
I'm able to open it again now, but it's still open while reloading the page.

41Accespted Re: Drop Down Menu Selector Tue May 18, 2010 3:45 am

Fred100

Fred100
Registered Member
Registered Member
ankillien wrote:
Fred100 wrote:Wow that's cool , it'd be awesome to see how or which codes to add to do so Razz

There are lots of drop-down menu scripts available on internet. You can make a google search for "drop down menu script" and find a script the suits your need. Once you find it, give me the link to it and I'll help you to install in in your forum Very Happy

It can be added in the forum header template.
Wow , that's pretty cool Very Happy
Thanks for the info again! Smile

http://www.art-castle.biz/forum.htm

42Accespted Re: Drop Down Menu Selector Tue May 18, 2010 8:10 am

Amber

Amber
Registered Member
Registered Member
Thanks for this tutorial, it was helpful Smile

43Accespted Re: Drop Down Menu Selector Fri May 21, 2010 9:51 pm

Niels


Registered Member
Registered Member
Bump

44Accespted Re: Drop Down Menu Selector Sat May 22, 2010 2:29 pm

ankillien

ankillien
Administrator
Administrator
Hi Rehua!

I checked codes on your site. You've forgot to add URL to the jQuery file.
Please replace the following code...

<script type="text/javascript" src="LINK TO JAVASCRIPT FILE"></script>

with this one...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

It is found just before the </head> tags in overall_header_new template.

Hope it helps Very Happy

45Accespted Re: Drop Down Menu Selector Sun May 30, 2010 10:25 pm

Niels


Registered Member
Registered Member
Nope :\.

46Accespted Re: Drop Down Menu Selector Mon May 31, 2010 3:28 pm

Joel

Joel
Registered Member
Registered Member
how i love this tutorial!

http://www.advertisehotspot.info/

47Accespted Re: Drop Down Menu Selector Mon May 31, 2010 8:32 pm

ankillien

ankillien
Administrator
Administrator
Rehua wrote:Nope :\.

Well, I try the same code on my test forum and it works fine.
May be you have missed something while putting the things together!
Can you try re installing it?

48Accespted Re: Drop Down Menu Selector Fri Dec 17, 2010 5:39 pm

blade99

blade99
Registered Member
Registered Member
apply css right?

http://dreamland.canadianforum.net/

Sponsored content


View previous topic View next topic Back to top  Message [Page 2 of 2]

Go to page : Previous  1, 2

Permissions in this forum:
You cannot reply to topics in this forum