It appears you have not yet registered with our community. To register please click here.

Origin XT RPG Network Home

Side Menu Help


Jul 25 2006, 06:54 PM (Post #1)
Peasant

Posts: 21
Cash: 4,599 / 0
Group: Newbie
Joined: 7/25/06 06:46 PM
I'm trying to get something like your side menu.

It is really cool.

I want to keep mine at the top like

http://www.warboards.org/

Though


Thanks!!!!
Post Options

 
Jul 25 2006, 07:15 PM (Post #2)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
First let's take a look at the code I use (this is the lite version), with the AJAX component stripped off:

HTML
<div id='menuicon' onmouseover='my_show_div(my_getbyid("fo_leftnav"))'>
// some sidemenu image here
</div>


and

HTML
<div id='fo_leftnav' style='display:none'>
// whatever you want to have in your floating menu
</div>


and here's the CSS:

CODE
#fo_leftnav, #menuicon{
position:fixed;top:0;left:0;z-index:101
}


So the CSS sets the menu to be fixed on the screen, and the browser takes care of the rest. I do have an all-inclusive DIV that on click will close the menu.

Try them out. I put them all at the end so that the menu loads after the page content loads.
Post Options

Jul 25 2006, 07:36 PM (Post #3)
Peasant

Posts: 21
Cash: 4,599 / 0
Group: Newbie
Joined: 7/25/06 06:46 PM
Sweet thanks.

Where do i add the the DIV Tags?

Also whats the ajax component?

Thanks ssmile.gif
Post Options

Jul 25 2006, 08:59 PM (Post #4)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
You may add the DIV tags anywhere within your BODY elements, because they are not relatively positioned anyway, right? Like I said, I have them load last because I want content to load before the menu.

When I mentioned the AJAX component, I was referring to the "Latest Topic Replies" feature. Basically whenever you open the side menu, your browser fetches a list of the latest topic replies (latest to the second you moused over the menu) from the server, parses it, and then displays it. Ignore that for now until you got everything else done.
Post Options

Jul 25 2006, 10:16 PM (Post #5)
Peasant

Posts: 21
Cash: 4,599 / 0
Group: Newbie
Joined: 7/25/06 06:46 PM
thanks gonan test this out sbiggrin.gif
Post Options

Jul 25 2006, 11:21 PM (Post #6)
Peasant

Posts: 21
Cash: 4,599 / 0
Group: Newbie
Joined: 7/25/06 06:46 PM
Ok msged u on aim.
Btw

When i hover over it it doesnt close.

Another thing is i cant scroll down.
Thanks sbiggrin.gif

This post has been edited by Dracoy: Jul 25 2006, 11:22 PM
Post Options

Jul 26 2006, 12:04 AM (Post #7)
I Love Jingy
* * * * * * * * *
Posts: 11,212
Cash: 2,142,701,519 / 2,147,483,647
Group: Cabinet Member
Joined: 11/30/04 08:44 PM
It isn't supposed to close when you hover away.
Post Options

Jul 26 2006, 12:47 AM (Post #8)
Peasant

Posts: 21
Cash: 4,599 / 0
Group: Newbie
Joined: 7/25/06 06:46 PM
I mean after i Hover over it it opens like normal.

Than once i click outside it doesnt close back in.

Another problem is that i cant scroll down.

Last but not least lol

I cant seem to change the width of the thing.

Thanks!
Post Options

Jul 26 2006, 01:16 AM (Post #9)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
QUOTE (Dracoy @ Jul 25 2006, 03:21 PM)
Ok msged u on aim.
Btw

When i hover over it it doesnt close.

Another thing is i cant scroll down.
Thanks sbiggrin.gif
*


I am not on AIM

Hovering over it shouldn't close it.

Set a height (and width) to the nav div.

QUOTE (Dracoy @ Jul 25 2006, 04:47 PM)
I mean after i Hover over it it opens like normal.

Than once i click outside it doesnt close back in.

Another problem is that i cant scroll down.

Last but not least lol

I cant seem to change the width of the thing.

Thanks!
*


Did you have an all inclusive DIV set to close the div when clicked on?

For the last few problems, refer to the above: set a height and width.
Post Options

Jul 26 2006, 01:23 AM (Post #10)
Peasant

Posts: 21
Cash: 4,599 / 0
Group: Newbie
Joined: 7/25/06 06:46 PM
What do you mean all inclusive DIV?

Plus i tried to set a height and width and it didnt do anything for me.

Here is my code for Board header/footers.

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=<% CHARSET %>" />
<link rel="shortcut icon" href="favicon.ico" />
<title><% TITLE %></title>
<% GENERATOR %>
<% CSS %>
<% JAVASCRIPT %>
</head>
<body>
<div id="ipbwrapper">
<% BOARD HEADER %>
<% MEMBER BAR %>
<!--GFMESSAGE-->
<% CHATOO %>
<% NAVIGATION %>
<!--IBF.NEWPMBOX-->
<% BOARD %>

<div id='menuicon' onmouseover='my_show_div(my_getbyid("fo_leftnav"))'>
<img src="http://iphotoshop.org/images/menu1.jpg">
</div>

<div id='fo_leftnav' style='display:none' width='50' height='1000'>


<table>
<tr>


<div class='borderwrap'>
<div class='maintitle'><{CAT_IMG}> Navigation</div>
<div class='tablepad'>
<{CAT_IMG}> <a target=_blank href="http://www.iPhotoshop.org">iPhotoshop</a><br />
<{CAT_IMG}> <a target=_blank href="http://www.iPhotoshop.org/renders">Renders</a><br />
<{CAT_IMG}> <a target=_blank href="http://www.iPhotoshop.org/psd">PSD Renders</a><br />
<{CAT_IMG}> <a href="http://www.iphotoshop.org/forums/index.php?showtopic=139">PSD Thumbnails</a><br />
<{CAT_IMG}> <a target=_blank href="http://www.iphotoshop.org/forums/chat/flashchat.php">iChat</a><br />
<{CAT_IMG}> <a href="http://www.iphotoshop.org/forums/index.php?autocom=referal&code=choices">iReferral</a><br />
<{CAT_IMG}> <a href="http://www.iphotoshop.org/forums/index.php?act=points">iPoints</a><br />
<{CAT_IMG}> <a href="http://www.iphotoshop.org/forums/index.php?act=store">iStore</a><br />
<{CAT_IMG}> <a href="http://www.iphotoshop.org/forums/index.php?act=Arcade">iArcade</a><br />
<{CAT_IMG}> <a href="http://www.iphotoshop.org/forums/index.php?autocom=teams">iTeams</a><br />
<{CAT_IMG}> <a target=_blank href="http://www.mail.iphotoshop.org">iMail</a><br />
<{CAT_IMG}> <a target=_blank href="http://www.iPhotoshop.org/blog">iNews</a><br />
<{CAT_IMG}> <a target=_blank href="http://www.iPhotoshop.org/upload">iUpload</a><br />
<{CAT_IMG}> <a href="#" onClick="MyWindow=window.open('http://www.iphotoshop.org/radio/?autoplay=1','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=220,height=300'); return false;"> iMusic</a><br />
</div>
</div>

<br />



<div class='borderwrap'>
<div class='maintitle'><{CAT_IMG}> Glory Wall</div>

<div class='submenu'><center><font color="black"><B>MOTM</B></font></center></div>
<div class='tablepad'>
Nominations start August 15th in Staff Forum.
</div>

<div class='submenu'><center><font color="black"><B>SOTW</B></font></center></div>
<div class='tablepad'>
Sig of the Week #1 in <a href="http://www.iphotoshop.org/forums/index.php?showtopic=475">iOfficial</a> Forum. (May be extended to first week of public release)
</div>

<div class='submenu'><center><font color="black"><B>ROTW</B></font></center></div>
<div class='tablepad'>
Render of the Week #1 in <a href="http://www.iphotoshop.org/forums/index.php?showtopic=478">iOfficial</a> Forum. (May be extended to first week of public release)
</div>

</div>


<br />



<div class='borderwrap'>
<div class='maintitle'><{CAT_IMG}> Support</div>
<div class='tablepad'>

<script type="text/javascript"><!--
google_ad_client = "pub-6053042570648886";
google_alternate_color = "252525";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "252525";
google_color_bg = "252525";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
//--></script>
<script type="text/javascript"
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


</div>
</div>

<br />



<div class='borderwrap'>
<div class='maintitle'><{CAT_IMG}> Affiliates</div>
<div class='tablepad'>
<center><!--exec.url='http://www.iphotoshop.org/affiliates/random.php'--></center>
<br />
<a href="http://iphotoshop.org/affiliates/clicks.php">View All</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?showtopic=537">Apply</a>
</div>
</div>

<br />




</td>

</tr>
</table>




</div>

<% BOARD FOOTER %>
<% STATS %>
<% COPYRIGHT %>
</div>
</body>
</html>
Post Options

Jul 26 2006, 02:45 AM (Post #11)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=<% CHARSET %>" />
<link rel="shortcut icon" href="/favicon.ico" />
<title><% TITLE %></title>
<% GENERATOR %>
<% CSS %>
<% JAVASCRIPT %>
</head>
<body>
<div id="ipbwrapper">
<div onclick="my_hide_div(my_getbyid('fo_leftnav'))">
<% BOARD HEADER %>
<% MEMBER BAR %>
<!--GFMESSAGE-->
<% CHATOO %>
<% NAVIGATION %>
<!--IBF.NEWPMBOX-->
<% BOARD %>
<% BOARD FOOTER %>
<% STATS %>
<% COPYRIGHT %>
</div>
<div id='menuicon' onmouseover='my_show_div(my_getbyid("fo_leftnav"))'>
<img src="http://iphotoshop.org/images/menu1.jpg">
</div>

<div id='fo_leftnav' style='display:none;width:300px;height:100%;overflow:auto;text-align:left'>


<table>
<tr>

<div class='borderwrap' style='text-align:left'>
<div class='maintitle'> Navigation</div>
<div class='tablepad' style='text-align:left'>
<a target=_blank href="http://www.iPhotoshop.org">iPhotoshop</a><br />
<a target=_blank href="http://www.iPhotoshop.org/renders">Renders</a><br />
<a target=_blank href="http://www.iPhotoshop.org/psd">PSD Renders</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?showtopic=139">PSD Thumbnails</a><br />
<a target=_blank href="http://www.iphotoshop.org/forums/chat/flashchat.php">iChat</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?autocom=referal&code=choices">iReferral</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?act=points">iPoints</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?act=store">iStore</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?act=Arcade">iArcade</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?autocom=teams">iTeams</a><br />
<a target=_blank href="http://www.mail.iphotoshop.org">iMail</a><br />
<a target=_blank href="http://www.iPhotoshop.org/blog">iNews</a><br />
<a target=_blank href="http://www.iPhotoshop.org/upload">iUpload</a><br />
<a href="#" onClick="MyWindow=window.open('http://www.iphotoshop.org/radio/?autoplay=1','MyWindow',& #39;toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res
izable=yes,width=220,height=300'); return false;"> iMusic</a><br />
</div>
</div>

<br />



<div class='borderwrap'>
<div class='maintitle'> Glory Wall</div>

<div class='submenu'><center><font color="black"><B>MOTM</B></font></center></div>
<div class='tablepad'>
Nominations start August 15th in Staff Forum.
</div>

<div class='submenu'><center><font color="black"><B>SOTW</B></font></center></div>
<div class='tablepad'>
Sig of the Week #1 in <a href="http://www.iphotoshop.org/forums/index.php?showtopic=475">iOfficial</a> Forum. (May be extended to first week of public release)
</div>

<div class='submenu'><center><font color="black"><B>ROTW</B></font></center></div>
<div class='tablepad'>
Render of the Week #1 in <a href="http://www.iphotoshop.org/forums/index.php?showtopic=478">iOfficial</a> Forum. (May be extended to first week of public release)
</div>

</div>


<br />



<div class='borderwrap'>
<div class='maintitle'> Support</div>
<div class='tablepad'>

<script type="text/javascript"><!--
google_ad_client = "pub-6053042570648886";
google_alternate_color = "252525";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "252525";
google_color_bg = "252525";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


</div>
</div>

<br />



<div class='borderwrap'>
<div class='maintitle'> Affiliates</div>
<div class='tablepad'>
<center><!--exec.url='http://www.iphotoshop.org/affiliates/random.php'--></center>
<br />
<a href="http://iphotoshop.org/affiliates/clicks.php">View All</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?showtopic=537">Apply</a>
</div>
</div>

<br />
</td>

</tr>
</table>

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


Try that
Post Options

Jul 26 2006, 02:50 AM (Post #12)
Peasant

Posts: 21
Cash: 4,599 / 0
Group: Newbie
Joined: 7/25/06 06:46 PM
Thanks for the fix.

http://www.iphotoshop.org/test/index.php?

If you notice it still has messed up width/doesnt scroll ^^

Thanks again!
Post Options

Jul 26 2006, 03:20 AM (Post #13)
Not Odd anymore
* * * * * * * * * *
Posts: 45,875
Cash: 1,915,578 / 1,817,041,051
Group: Administrator
Joined: 7/10/02 09:48 PM
Actually, try this:

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=<% CHARSET %>" />
<link rel="shortcut icon" href="/favicon.ico" />
<title><% TITLE %></title>
<% GENERATOR %>
<% CSS %>
<% JAVASCRIPT %>
</head>
<body>
<div id="ipbwrapper">
<div onclick="my_hide_div(my_getbyid('fo_leftnav'))">
<% BOARD HEADER %>
<% MEMBER BAR %>
<!--GFMESSAGE-->
<% CHATOO %>
<% NAVIGATION %>
<!--IBF.NEWPMBOX-->
<% BOARD %>
<% BOARD FOOTER %>
<% STATS %>
<% COPYRIGHT %>
</div>
<div id='menuicon' onmouseover='my_show_div(my_getbyid("fo_leftnav"))'>
<img src="http://iphotoshop.org/images/menu1.jpg">
</div>

<div id='fo_leftnav' style='display:none;width:300px;height:100%;overflow:auto;text-align:left'>

<table>
<tr>
<td style='text-align:left'>
<div class='borderwrap' style='text-align:left'>
<div class='maintitle'> Navigation</div>
<div class='tablepad' style='text-align:left'>
<a target=_blank href="http://www.iPhotoshop.org">iPhotoshop</a><br />
<a target=_blank href="http://www.iPhotoshop.org/renders">Renders</a><br />
<a target=_blank href="http://www.iPhotoshop.org/psd">PSD Renders</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?showtopic=139">PSD Thumbnails</a><br />
<a target=_blank href="http://www.iphotoshop.org/forums/chat/flashchat.php">iChat</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?autocom=referal&code=choices">iReferral</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?act=points">iPoints</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?act=store">iStore</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?act=Arcade">iArcade</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?autocom=teams">iTeams</a><br />
<a target=_blank href="http://www.mail.iphotoshop.org">iMail</a><br />
<a target=_blank href="http://www.iPhotoshop.org/blog">iNews</a><br />
<a target=_blank href="http://www.iPhotoshop.org/upload">iUpload</a><br />
<a href="#" onClick="MyWindow=window.open('http://www.iphotoshop.org/radio/?autoplay=1','MyWindow',& #39;toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res

izable=yes,width=220,height=300'); return false;"> iMusic</a><br />
</div>
</div>

<br />



<div class='borderwrap'>
<div class='maintitle'> Glory Wall</div>

<div class='submenu'><center><font color="black"><B>MOTM</B></font></center></div>
<div class='tablepad'>
Nominations start August 15th in Staff Forum.
</div>

<div class='submenu'><center><font color="black"><B>SOTW</B></font></center></div>
<div class='tablepad'>
Sig of the Week #1 in <a href="http://www.iphotoshop.org/forums/index.php?showtopic=475">iOfficial</a> Forum. (May be extended to first week of public release)
</div>

<div class='submenu'><center><font color="black"><B>ROTW</B></font></center></div>
<div class='tablepad'>
Render of the Week #1 in <a href="http://www.iphotoshop.org/forums/index.php?showtopic=478">iOfficial</a> Forum. (May be extended to first week of public release)
</div>

</div>


<br />



<div class='borderwrap'>
<div class='maintitle'> Support</div>
<div class='tablepad'>

<script type="text/javascript"><!--
google_ad_client = "pub-6053042570648886";
google_alternate_color = "252525";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "252525";
google_color_bg = "252525";
google_color_link = "FFFFFF";
google_color_text = "FFFFFF";
google_color_url = "FFFFFF";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


</div>
</div>

<br />



<div class='borderwrap'>
<div class='maintitle'> Affiliates</div>
<div class='tablepad'>
<center><!--exec.url='http://www.iphotoshop.org/affiliates/random.php'--></center>
<br />
<a href="http://iphotoshop.org/affiliates/clicks.php">View All</a><br />
<a href="http://www.iphotoshop.org/forums/index.php?showtopic=537">Apply</a>
</div>
</div>

<br />
</td>

</tr>
</table>

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


And add into the css:

CODE
td #fo_leftnav, div #fo_leftnav { text-align:left}
Post Options