TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

Welcome to TinyPortal. Please login or sign up.

Members
  • Total Members: 3,963
  • Latest: BiZaJe
Stats
  • Total Posts: 195,917
  • Total Topics: 21,308
  • Online today: 884
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 365
  • Total: 365

Site map change help

Started by dkharp, October 20, 2009, 12:20:36 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

dkharp

Greetings!

I am running smf 1.1.10 / TinyPortal v1.0 beta 4
My site is: www.36thid.info

On the site map is there a way that I could have like drop down menu? Meaning one tab in the site map that would say stats and when the mouse goes over it a sidebar type would show with different links for different. stats.

I have a few links at the bottom of my site under different names. So in the site map have one link that says republic and when the scroll over it it will show many links under that name and so one

Hope this makes scene.  

IchBin

No, there is no feature for that. The best thing you could do is to add a code snippet menu in a html/javascript block.

dkharp

Thank you Ichbin,

To give you an Idea check out http://www.texasteamplayers.com/index.php they call it
Quotemain menu

When you move your mouse over some have extra tabs. Very cool.

OLD/Rommel

Quote from: dkharp on October 20, 2009, 01:21:49 AMTo give you an Idea check out http://www.texasteamplayers.com/index.php they call it
Quotemain menu

When you move your mouse over some have extra tabs. Very cool.

yeah , just what I've been looking 4.
Had a look at the source, even tried to copy it, but I'm not skilled enough.
Just ended up with an ordinary menu/sub menu all visible. No mouseover effect at all.

If someone could create a script as seen on the ttp cite, that would be most appreciated.

ZarPrime

It's probably one of the CSS menus from dynamic drive, probably this one ...
http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm

You could always ask the owner of that site what menu he's using.

ZarPrime

dkharp

Ok,
Here is the deal. It is very simple to do. However, there is a trick to it for this http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm to work with TP/SMF

Step 1: This script uses two external files."anylinkcssmenu.css" and "anylinkcssmenu.js"
Put the two files into your main directory, Not your theme directory.

Create a HTML / java block and at the top put step two code.

Step 3: Add the following sample HTML in your HTML/JAVA block.

So your TP Block should look like this.

Quote<link rel="stylesheet" type="text/css" href="anylinkcssmenu.css" />

<script type="text/javascript" src="anylinkcssmenu.js">

/***********************************************
* AnyLink CSS Menu script v2.0- Ã,© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>
<!--1st anchor link and menu -->

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Default Example</a></p>

                                                   
<div id="submenu1" class="anylinkcss">
<ul>
<li>Dynamic Drive</li>
<li>CSS Drive</li>
<li>JavaScript Kit</li>
<li>Coding Forums</li>
<li>JavaScript Reference</li>
</ul>
</div>






<!--2nd anchor link and menu -->

<p><a href="http://www.dynamicdrive.com" class="anchorclass someotherclass" rel="submenu2[click]" rev="lr">Right dropping menu</a> (click to reveal)</p>
                                                   
<div id="submenu2" class="anylinkcss" style="width: 150px; background-color:#E9FECB">
<ul>
<li>CNN</li>
<li>MSNBC</li>
<li>Google</li>
<li>BBC News</li>
</ul>
</div>








<!--3rd anchor link and menu -->

<p style="text-align:center"><a href="http://www.dynamicdrive.com" class="anchorclass myownclass" rel="submenu3">Menu with multiple columns</a></p>
                                                   
<div id="submenu3" class="anylinkcsscols">

<div class="column">
   Web Development
   <ul>
   <li>Dynamic Drive</li>
   <li>CSS Drive</li>
   <li>JavaScript Kit</li>
   <li>Coding Forums</li>
   <li>DOM Reference</li>
   </ul>
</div>

<div class="column">
   News Related
   <ul>
   <li>CNN</li>
   <li>MSNBC</li>
   <li>Google</li>
   <li>BBC News</li>
   </ul>
</div>

<div class="column">
   Technology
   <ul>
   <li>News.com</li>
   <li>SlashDot</li>
   <li>Digg</li>
   <li>Tech Crunch</li>
   </ul>
</div>

</div>




<!--4th anchor link-->

<p><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu4" data-image="http://i44.tinypic.com/2mni3yx.gif" data-overimage="http://i43.tinypic.com/24fycd5.gif"><img src="http://i44.tinypic.com/2mni3yx.gif" style="border-width:0" /></a></p>

<div id="submenu4" class="anylinkcsscols" style="background: #FEEBAB">

<div class="column">
   Web Development
   <ul>
   <li>Dynamic Drive</li>
   <li>CSS Drive</li>
   <li>JavaScript Kit</li>
   <li>Coding Forums</li>
   <li>DOM Reference</li>
   </ul>
</div>

<div class="column">
   News Related
   <ul>
   <li>CNN</li>
   <li>MSNBC</li>
   <li>Google</li>
   <li>BBC News</li>
   </ul>
</div>

<div class="column">
   Technology
   <ul>
   <li>News.com</li>
   <li>SlashDot</li>
   <li>Digg</li>
   <li>Tech Crunch</li>
   </ul>
</div>

</div>

Customize and your done!


OLD/Rommel

Thx 4 all help. Found this script before I read your post dkharp. That script was what I needed. No upload files needed. Just copy/paste to a TP script block and customize links etc. Work just fine!  :)

ZarPrime

Yeah, those are both nice.  The AnyLink one is nice if you want to separate your CSS out to a separate file to make it easier to configure, but the other one is nice as well.

I will mark this topic solved. :up:

ZarPrime

dkharp

Here is an Idea of what you can do with this code. http://www.36thid.info

ZarPrime

Yeah, that looks pretty good but for that type I would consider putting the menus horizontally in an upper block or something like that so that they wouldn't bounce around like they do in the left panel, or you could force a static height on all the blocks in the left panel so that it wouldn't bounce like that.

Also, I wanted to tell you how much I detest that "Welcome Guest" banner that pops up on your site for guests.  :P I understand what it's for but it is truly annoying, simply because it doesn't have a close button.

ZarPrime

This website is proudly hosted on Crocweb Cloud Website Hosting.