Welcome Guest [Log In] [Register]
Search Members Calendar | Rules ZB Code Index IF Code Index
ZBCode
  • Navigation
  • ZBCode
  • Coding Resources
  • Zetaboards Modifications
  • 3 Piece Top Menu
Hey, welcome to ZBCode, the premier coding forum for ZB. Here you fill find some of the best Invisionfree and Zetaboards Codes on the network! Unfortunately, you're sorta hovering around in guest mode at the moment; why not join in on the fun? Register an account and you can start accessing the wealth of resources we have available here. Enjoy your stay at ZBCode, and remember to tell all your friends about us; the more members, the more codes available. ;)

Interested in joining? Click here.


If you are already a member of ZBCode, feel free to login right here:

Username:   Password:
Locked Topic
3 Piece Top Menu
Tweet Topic Started: Dec 14 2008, 01:12 PM (1,420 Views)
skiggs Dec 14 2008, 01:12 PM Post #1
Member Avatar


Posts:
16
Group:
Member
Member
#1,681
Joined:
Dec 3, 2008
Coding language
HTML/CSS
Code: 3 Piece Top Menu.
What it does: It allows you to create a part of the top menu that is different from the rest of your top_bar.
Preview:Clicky
Note: Thanks to Nicola for helping me get this working :) Also, the PREVIEW Image has the parts labled to anyone who may be confused.
The Code:
Put this at the end of your board wrappers
Code:
 

<script type="text/javascript">
//<![CDATA[
$(function() {
$("#top_menu").wrap('<div id="top_menu_r"></div>');
$("#top_menu_r").wrap('<div id="top_menu_l"></div>');
});
//]]>
</script>


Now for the CSS. This is where it might get tricky!
First, find the #top_menu in your CSS. Append the following directly after it, and replace the actual #top_menu with what I have here. THE MARGIN MUST BE 0Px, or else the top bar will not work correctly.
Code:
 

#top_menu {
background:#YOU BG COLOR HEX;
margin:0px;
}

#top_menu_r {
background: url(URL of Right Side Image) right top no-repeat;
height:Height of Imagepx;
padding-right:10px;
}

#top_menu_l {
background: url(URL of Left Side Image) left top no-repeat;
height:HeightofImagepx;
float:right;
padding-left:10px;
}

Now find the #drop_menu li in your CSS, and replace it with the following:
Code:
 

.drop_menu li {
background:url(Repeating Image URL) repeat-x top;
text-align:center;
float:left;
}

This is what your CSS Should like like after this is completed
Code:
 

#top_menu {
background:#YOU BG COLOR HEX;
margin:0px;
}

#top_menu_r {
background: url(URL of Right Side Image) right top no-repeat;
height:Height of Imagepx;
padding-right:10px;
}

#top_menu_l {
background: url(URL of Left Side Image) left top no-repeat;
height:HeightofImagepx;
float:right;
padding-left:10px;
}

.drop_menu li {
background:url(Repeating Image URL) repeat-x top;
text-align:center;
float:left;
}


Any Questions or comments please feel free to ask, I'll gladly try and help.
Edited by Reid, Jun 15 2009, 08:19 PM.
Offline Profile Goto Top
 
Choronzon Dec 19 2008, 01:56 AM Post #2


Posts:
10
Group:
Member
Member
#1,551
Joined:
Nov 15, 2008
Coding language
ASP.Net
It's good
Offline Profile Goto Top
 
Moon Feb 28 2009, 02:21 PM Post #3
Member Avatar


Posts:
44
Group:
Member
Member
#2,307
Joined:
Feb 12, 2009
Coding language
HTML/CSS
the preview dosn't work. It said the image was removed
Posted Image
Love Animals? Click here!
Offline Profile Goto Top
 
Pounce Apr 19 2009, 07:04 PM Post #4


Posts:
5
Group:
Member
Member
#2,825
Joined:
Apr 18, 2009
Coding language
None
I tried this code and got an error that I just cannot figure out.

On the right side, the middle img is bleeding over....see pic in first spoiler
Spoiler: click to toggle

Posted Image

any help on this?

Spoiler: click to toggle

#top {
background: repeat-x top url(http://i274.photobucket.com/albums/jj247/Fweb/forum/topm.gif) transparent;
border-bottom:0px;
height:35px;


padding:0px;
margin: 0px 7px;
margin-bottom:12px;
}

#top_info {
background: no-repeat top left url(http://i274.photobucket.com/albums/jj247/Fweb/forum/topl.gif);
color:#F9F2DF;
font-size:90%;
float:left;
padding:10px 10px;
padding-left:30px!important;
margin-top:0px;
}

#top_info a {
color:#389eb7}

#top_info a:hover {
color:#65c7df}


#top_menu {
background: top right no-repeat url(http://i274.photobucket.com/albums/jj247/Fweb/forum/topr.gif);
font-size:90%;
border-left:0px solid #3a5197;
float:right;
padding:10px;
padding-right:45px!important;
margin-top:0px;
}




Edited by Pounce, Apr 19 2009, 07:05 PM.
Offline Profile Goto Top
 
Kevin Apr 19 2009, 07:08 PM Post #5
Member Avatar


Posts:
700
Group:
Former Staff
Member
#8
Joined:
Jul 2, 2008
Coding language
HTML/CSS
Could you provide a link to your board, and the rest of the CSS for the code (the part containing #top_menu_l and #top_menu_r)?
Posted Image
Offline Profile Goto Top
 
Pounce Apr 19 2009, 07:37 PM Post #6


Posts:
5
Group:
Member
Member
#2,825
Joined:
Apr 18, 2009
Coding language
None
It official...I don't know what the heck I'm doing...I messed it up even more than before.

http://s7.zetaboards.com/Test_of_Infinity/index/

Spoiler: click to toggle

#top_menu {
background:#3a5197;
margin-top:0px;
}

#top_menu_r {
background: url(http://i274.photobucket.com/albums/jj247/Fweb/forum/topr.gif) right top no-repeat;
height:35px;
padding-right:10px;
}

#top_menu_l {
background: url(http://i274.photobucket.com/albums/jj247/Fweb/forum/topl.gif) left top no-repeat;
height:35px;
float:right;
padding-left:10px;
}

.drop_menu li {
background:url(http://i274.photobucket.com/albums/jj247/Fweb/forum/topm.gif) repeat-x top;
text-align:center;
float:left;
}
Edited by Pounce, Apr 19 2009, 07:40 PM.
Offline Profile Goto Top
 
Lanex Jul 14 2009, 12:51 PM Post #7


Posts:
3
Group:
Member
Member
#3,264
Joined:
Jun 28, 2009
Coding language
None
Is it possible to have a new preview put up so I can have a clear look before deciding whether or not to add this to my theme?
Offline Profile Goto Top
 
Namieko Aug 3 2009, 03:31 PM Post #8
Member Avatar
Mother hen

Posts:
159
Group:
Member
Member
#3,293
Joined:
Jul 7, 2009
Coding language
HTML/CSS
works like a charm and its place ment can be chosen some what.... grate job!
Posted Image
Offline Profile Goto Top
 
Ruben O' Brien Apr 14 2010, 05:33 PM Post #9


Posts:
158
Group:
Member
Member
#3,783
Joined:
Apr 13, 2010
Just letting you know the preview doesnt work :-)
Posted Image

Posted Image
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Zetaboards Modifications · Next Topic »
Locked Topic

Track Topic · E-mail Topic Time: 7:50 PM Jul 10
Hosted for free by ZetaBoards · Privacy Policy