MyBB Community Forums

Full Version: How do i make the tabs
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
^ well, here is a quick example menu for you (modified from some other work)

admin panel --> templates --> current templates set --> header templates --> header
add below code at the top

<div id="mytop_links">
<div class="linkscontainer">
					<ul id="mynav">
	<li><a href="#">link 1</a>
	<li><a href="#">link 2</a>	
<li><a href="#">link 3</a>
<li><a href="#">link 4</a>
	<li><a href="#">link 5</a>	
<li><a href="#">link 6</a>
<li><a href="#">link 7</a>
	<li><a href="#">link 8</a>	
					</ul>
			</div>		
				</div>

AND admin panel --> themes --> current theme --> global.css -->
Edit Stylesheet: Advanced Mode --> scroll to the bottom & add below

/* customized top menu */
#mytop_links {
margin:auto auto;
width: 950px;
}

.linkscontainer {

	height: 40px;

    background: url(./images/links-background.png) top left repeat-x;

    padding-left: 8px;

	}

	

#mynav {

	height: 40px;

	}



#mynav, #mynav ul { 

	padding: 0;

	margin: 0;

	list-style: none;

	line-height: 1;

	}

#mynav {

	margin-bottom: 1px;

	}

	

#mynav ul {

	float: left;

	list-style: none;

	margin: 0px 0px 0px 0px;

	padding: 0px;

	}

	

#mynav li {

	float: left;

	list-style: none;

	margin: 0px;

	padding: 0px;

	}

	

#mynav ul li {

	list-style: none;

	margin: 0px;

	padding: 0px;

	}

	

#mynav li a, #mynav li a:link {

	color: #fff;

	display: block;

    margin: 0px 6px 0px 0;

	padding: 14px 14px;

	text-decoration: none;

	font-size: 12px;

	font-weight: bold;

	text-transform: uppercase;

    font-family: Arial, Helvetica, Sans-serif;

    text-shadow: 0 1px 0 #2f3e46;

	}

	

#mynav li a:hover, #mynav li a:active {

	color: #fff;

	display: block;

	text-decoration: none;

    background: url(./images/nav-background-hover.png) top left repeat-x;

    text-shadow: 0 1px 0 #ac2f04;

	}

	

#mynav  li.current-cat a {

	color:#fff;

    background: url(./images/nav-background-hover.png) top left repeat-x;

    text-shadow: 0 1px 0 #ac2f04;

	}



#mynav li:hover, #mynav li.sfhover { 

	position: static;

	}


if it is difficult to understand above code then PM me ...

simple menu - demo : [attachment=23436]
Pages: 1 2