Simple & Professional Menu with Icons.

[youngjoonshi]

Wow, can you post that here please IchBin? looks very nice...

[Crip]

Thats kind of like the .css {#display-block;} yes..?

[Maya]

 
Nice job YJ and eeek. I really like this menu style with the icons, and the mousover is a nice touch Ich....

Definitely usable!

[IchBin]

Yes thats pretty much how it works Crip. I've seen it all over the internet so I decided to do my own.

All the code is in the html file attached here. You can change the colors, spacing, border and font etc in the style tags of the HTML file.

For those who don't know you can just include this file in a phpbox like this to make it work:

Code Select Expand

include('menu.html');

RENAME FILE TO menu.html after you save it.

[SOcRatEs]

Now if only we/I could figure out how to implement both   YJ's & IchBinâââ,¬Å¾Ã,¢ feature (They both look sweet!) into this.

(F1) side slide menu

[youngjoonshi]

Hmm...IchBin, does this include that nice CSS flashing as well?

[IchBin]

The mouseover affect? Yes it does.

[youngjoonshi]

Nice! I will try it out now...

[stigmartyr]

I just remembered that I cant make a menu with no links...  Did you want  me to make a menu with all the links you have in your menu now?  Or did you want a portal?  Id rather make something you intend to use   Since its not going to be easy to mod after the fact.

But Ich might have u covered, so lemme know...

[youngjoonshi]

Hmm...if that's the case, then I think you should use the blue theme of DilberMC...(the one Iuse).

The links?

Please use the links inside this code, I have updated it a little.

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/news.gif"/> <font size="2"><a href="http://www.gadgetkorea.com/index.php?board=82.0">News</a></font><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/chat.gif"/> <font size="2"><a href="javascript:poptastic('chat/php121im.php');">Live Chat</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><img src="Themes/TP_DilberMC/images/menu/vip.gif" /> <font size="2"><b><a href="http://www.gadgetkorea.com/index.php?topic=865.0">VIP Account</a></b></font></b><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>

It currently looks like this:




Two questions:

Can I actually modify them afterwards?? Also, are you going to use the same icons as I used?