Simple & Professional Menu with Icons.

[youngjoonshi]

Hi,

After getting so much kind support from all of you, I couldn't resist giving something back to the community.
This idea originally came from me (yes..), when I visited RebelRose's Tae Kwon Do site, which was running this "MK Portal", another portal system, similar to Tiny Portal. However, I was really amazed by it's menu...

I know I am not an expert in coding but with the help of IchBin for the starter template, I was able to modify and modify it...until I was able to create a really good menu...(I was surprised myself.)

To be honest, I was really bored with the bullet point style menu...they are image files anyway...so the new menu with excellent icons should not take too much loading time.

Amazing how much my HTML knowledge improved... Of course, if you wish to re-modify it, then that is absolutely fine, no worries.

I do hope you guys like it, here is my first attempt at coding something...(3 hours of work!):

Simple & Professional Menu with Icons.- V.1.1 by YJ (Fixed Calendar height issue.)

DEMO: www.gadgetkorea.com



[Install Instruction]

Simply copy & paste the following code into a HTML block but remember to change "www.gadgetkorea.com" to your domain and delete some links if necessary:

Code Select Expand

<div class="smalltext"><font  size="1"><b>Navigation</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/home.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php">Home</a></font><br> <img src="Themes/TP_DilberMC/images/menu/forum.gif" /> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=forum">Forum</a></font></b><br><img src="Themes/TP_DilberMC/images/menu/archive.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/archive.php">Archive</a></font><br><img src="Themes/TP_DilberMC/images/menu/links.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/dir/">Link Directory</a></font><br><img src="Themes/TP_DilberMC/images/menu/rss.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=.xml">Syndication</a></font><br><br><font size="1"><b>Services</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/shop.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=shop">Shop</a></font><br><img src="Themes/TP_DilberMC/images/menu/calendar.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=calendar">Calendar</a></font><br><img src="Themes/TP_DilberMC/images/menu/members.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=mlist">Member List</a></font><br><img src="Themes/TP_DilberMC/images/menu/member_map.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=mm">Member Map</a></font><br><img src="Themes/TP_DilberMC/images/menu/online.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=who">Who's Online?</a></font><br><img src="Themes/TP_DilberMC/images/menu/stats.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=stats">Statistics</a></font><br><br><font size="1"><b>Help & Support</b></font><br><hr><img src="Themes/TP_DilberMC/images/menu/search.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=search">Search</a></font><br><img src="Themes/TP_DilberMC/images/menu/faq.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=help">Help Center</a></font><br><img src="Themes/TP_DilberMC/images/menu/staff.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?action=staff">Site Staff</a></font><br><img src="Themes/TP_DilberMC/images/menu/contact_us.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?page=4">Contact Us</a></font></div>

After that, please upload the attached images under:

/your_folder/Themes/your_theme/images/menu

Now, important thing is that you will need to edit the image directory at the code above, because mine is currently directing to "TP_DilberMC". So, if you have that folder, no problem but if you don't, please change it. Also, it doesn't matter where you put them...anywhere is good enough, just make sure you edit the direction in my code.

That's it, I think. I have made the titles smaller as it looks too similar with the block title...also, the line tag was a nice addition.

More effects, better icons...etc. ? Please share it with us here! Suggestions & Feedbacks welcomed!

[rebelrose]

Very nice, hope I can get it to work, well done!!!

[RoarinRow]

Wow, that's nice.  Thanks for sharing.   :up:

[stigmartyr]

Your menu is very nice and professional looking.  It musta taken you quite some time to get those icons perfect   I could certainly see myself using it on one of my commercial sites.

For my own favorite TP site I enjoy using XARA Webstyle to make javascript powered (roll-over menus) and then calling the menu into a java block.  Its pretty easy.

DEMO: http://black-chapter.com/forums

This of course works if you have dreamweaver or Xara to help make roll-over buttons.  I prefer this menu system only because I can create submenus which slide out, thus saving me vertical space, and keeping the block smaller.

How can I implement your own menu system if I wanted to?

[youngjoonshi]

@ÂÃ,§tigmartyr, wow, that's exactly what I wanted...

One thing is that I don't know how to use dreamwaver or Xara to make these buttons...I would need some help from you. Of course you can implement it with your menu system...

[stigmartyr]

Xara webstyle is super easy to use.  If you have bittorrent or use Opera browser (www.opera.com) you can probably find a torrent out there of Xara webstyle.  Due to copy right infringement I can say no more   But I would highly suggest that you get urself a copy.

Once you have that, you can just open it up, and its GUI interface is very simple.  You select MENUS and off you go!  You can choose from among dozens of styles and templates, and even modify each one's colors to fit ur own theme.

Configuring the menus is super easy, just cut and paste the URLs you want and pick the 'target' (i.e. _self, _blank, _parent, etc).  Once you are done, you SAVE ur project and then copy all the files to your forums (any folder you like).  Xara outputs the javascript image files for you.  You dont have to be a coder

You then create a java/html (script) box and paste in the code to call the menu up. 

Example for mine:

Code Select Expand

<script src="xaramenu.js"></script><script Webstyle4 src="tube_menu.js"></script>

whereas all my files reside in the root of my /forums

[youngjoonshi]

Is it really that simple??

Hmm...I should get that software but is that legal to get it for free...(?)

[stigmartyr]

Is it really that simple??

Hmm...I should get that software but is that legal to get it for free...(?)

The answer to that would depend greatly on the piracy laws of your host nation  :coolsmiley:

XARA is wonderful for doing graphics / banners / buttons etc.  Dreamweaver can also make simple roll-overs and at least assist in coding the HTML to put into your different HTML and script blocks.

To make the menus I use, you will need XARA.

I also use Fireworks to make pop-up menus to turn one whole jpeg or gif into a menu:

Example: http://black-chapter.com/forums/index.php?page=19

Fireworks comes with Macromedia Studio 8.  Im not advising you to get the free versions or not   Im just saying that you can probably find them for free on a p2p network.  TO purchase a copy, you should be prepared to spend close to $1000.00US for both proggys.

[youngjoonshi]

Oh my days...I think I will just leave it...if it's so simple, maybe you can do that for me..

[stigmartyr]

There you go   I can do that for you too ...  oh wait.  I just got coopted!  oH gNoez!


What did ya have in mind?  Ive got pennance to pay here methinks.  Ill hook you up.

Just gimme ur Categories Sub Categories, URLs and targets for each URL (i.e. self, mainFrame, blank, etc...)

Id need to know your design concept for the menu too...