Add a Top Menu Dropdown like IPS website

Add a Top Menu Dropdown like IPS website


STEP 1

Open ACP - Look&Feel - template - select your skin - globaltemplate

find:

<div id='header'>
				<div id='branding'>
					<if test="brandingBar:|:method_exists( $this->registry->output->getTemplate( $this->registry->getCurrentApplication() . '_global' ), 'overwriteHeader' )">
						{parse template="overwriteHeader" group="{current_app}_global" params=""}
				

and add before:

<!-- ADDITIONAL IPS DROPDOWN MENU BEGIN -->
<style>
#callout {
background: #f7f0d2;
padding: 10px 0;
text-align: center;
color: #7d6812;
}
</style>
<!-- <div id='callout'>
We are aware of ongoing network issues and are working to bring customer communities back online as quickly as possible. Thank you for your understanding.
</div> --> <script type='text/javascript' src='{$this->settings['board_url']}/public/js/top_menu_ips.js'></script>


<style type='text/css'>

/*365b86 general color background*/

/*416a9a primary hover background and dropdown background*/

/*edf001 text hover color*/


#masthead {
	color: #fff;
	height: 35px;
	background: #365b86;
}

/*0d253e*/

#ips_main_branding {
	margin-top: 8px;
	margin-left: 10px;
display: block;
float: right;
}

#primary_navigation {
	margin-top: 3px;
	margin-right: 15px;
	float: right;
	position: relative;
	z-index: 10000;
}

	#primary_navigation li {
		float: left;
		font-size: 14px;
		margin-right: 22px;
		text-shadow: #0a1a2b 1px 1px 2px;
		font-family: helvetica, arial, tahoma, sans-serif;
	}
		
		#primary_navigation li:last-child {
			margin-right: 0px;
		}
		
		#primary_navigation li {
			float: left;
			font-size: 14px;
			margin-right: 15px;
		}
		
			#primary_navigation > li > a {
				display: block;
				padding: 7px 8px;
				color: #fff;
				text-decoration: none;
			}
			
			#primary_navigation li a:hover,
			#primary_navigation li.active > a {
				background: #416a9a;
				color: #edf001;
				-moz-border-radius: 4px;
				-webkit-border-radius: 4px;
			}
			
	#primary_navigation .main_menu {
		display: block;
		background: #416a9a;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		z-index: 50000;
		margin-top: -5px;
		padding: 10px 5px 5px;
		min-width: 150px;
	}
	
		#primary_navigation .main_menu li {
			display: block;
			font-size: 12px;
			padding: 4px 6px;
			float: none;
		}
			
			#primary_navigation .main_menu li a {
				text-decoration: none;
				color: #fff;
				display: block;
				padding: 4px;
				text-shadow: none;
			}
			
			#primary_navigation .main_menu li a:hover {
				color: #edf001;
			}
	
	#primary_navigation .main_menu li.indent {
		padding: 1px 6px 1px 20px;
	}
	#primary_navigation .main_menu li.sep {
		padding-top: 8px;
		margin-top: 8px;
		border-top: 1px solid #2f4259;
	}
</style>

<div id='masthead'>
		<ul id='primary_navigation'>
					<li id='nav_home' class='left'><a href='http://www.invisionpower.com'>IPS Home Page</a></li>

					<li id='nav_products'>
						<a href='http://www.invisionpower.com/suite/'>Our Suite</a>
						<ul id='nav_products_menu' class='main_menu'>
							<li><a href='http://www.invisionpower.com/suite/' title='Ths IPS Platform'>The IPS Platform</a></li>
							<li><a href='http://www.invisionpower.com/products/' title='Product Line-up'>Product Line-up</a></li>
							<li class='indent'><a href='http://www.invisionpower.com/products/board/' title='IP.Board: Community Discussion Board'>IP.Board</a></li>
<li class='indent'><a href='http://www.invisionpower.com/products/nexus/' title='IP.Nexus'>IP.Nexus</a></li>

							<li class='indent'><a href='http://www.invisionpower.com/products/blog/' title='IP.Blog: Community Blogging Service'>IP.Blog</a></li>
							<li class='indent'><a href='http://www.invisionpower.com/products/content/' title='IP.Content: Content Creation System'>IP.Content</a></li>
							<li class='indent'><a href='http://www.invisionpower.com/products/gallery/' title='IP.Gallery: Community Image Gallery'>IP.Gallery</a></li>

							<li class='indent'><a href='http://www.invisionpower.com/products/chat/' title='IP.Chat: Realtime Community Chatroom'>IP.Chat</a></li>
							<li class='indent'><a href='http://www.invisionpower.com/products/downloads/' title='IP.Downloads: Download Manager'>IP.Downloads</a></li>
							<li class='sep'><a href='http://www.invisionpower.com/products/spammonitor/' title='Spam Monitoring: Protecting Communities From Spam'>Spam Monitoring</a></li>

							<li><a href='http://www.invisionpower.com/suite/convert.php' title='Convert to an IPS community'>Convert to IPS</a></li>
							<li><a href='http://www.invisionpower.com/suite/requirements.php' title='Suite requirements'>Suite Requirements</a></li>
							<li><a href='http://www.invisionpower.com/suite/demo.php' title='Try our suite free'>Try our suite free</a></li>
						</ul>
						<script type='text/javascript'>
							ips.menus['products'] = new ips.menu( $('nav_products'), $('nav_products_menu') );
						</script>

					</li>

					<li id='nav_hosted'>
						<a href='http://www.invisionpower.com/hosting/'>Hosted Communities</a>
						<ul id='nav_hosted_menu' class='main_menu'>
							<li><a href='http://www.invisionpower.com/hosting/' title='Go to standard packages'>Standard Packages</a></li>
							<li><a href='http://www.invisionpower.com/hosting/advanced.php' title='Go to Advanced packages'>Advanced Packages</a></li>
						</ul>
						<script type='text/javascript'>
							ips.menus['hosted'] = new ips.menu( $('nav_hosted'), $('nav_hosted_menu') );
						</script>

					</li>
					<li id='nav_services'>
						<a href='http://www.invisionpower.com/services/' title='Go to our Services overview'>Services</a>
					</li>
					<li id='nav_support'>

						<a href='#'>Support</a>
						<ul id='nav_support_menu' class='main_menu'>

							<li><a href='http://community.invisionpower.com/resources/official.html' title='Go to the resource site'>Documentation</a></li>
							<li><a href='http://www.invisionpower.com/customer/' title='Go to the client area'>Client Area</a></li>
							<li><a href='http://community.invisionpower.com/resources/index.html' title='Go to the resource site'>Client Resources</a></li>
							<li><a href='http://community.invisionpower.com' title='Our community support forums'>IPS Community</a></li>

							<li><a href='http://www.invisionpower.com/company/faq.php' title='Go to the FAQs'>FAQs</a></li>
							<li><a href='http://www.invisionpower.com/hosting/status.php' title=''>Network Status</a></li>

						</ul>
						<script type='text/javascript'>
							ips.menus['support'] = new ips.menu( $('nav_support'), $('nav_support_menu') );
						</script>
					</li>
					<li id='nav_clientarea'>
						<a href='http://www.invisionpower.com/customer/' title='Go to the client area'>Client Area</a>
					</li>
					<li id='nav_store'>
						<a href='http://www.invisionpower.com/store/' title='Go to the store'>Store</a>

					</li>
					<li id='nav_contact'><a href='http://www.invisionpower.com/company/contact.php' title='Get in touch'>Contact Us &raquo;</a></li>
							
				</ul>
			</div>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2199880-2']);
  _gaq.push(['_trackPageview']);

  (function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<!-- ADDITIONAL IPS DROPDOWN MENU END -->

you can change color, changing this code in style section
365b86 general color background*/

416a9a primary hover background and dropdown background*/

edf001 text hover color*/


STEP 2
download the attached file, unzip it, is a .js file. you have to upload it in your /public/js folder


STEP 3
Customize the menu code with your link