Sign in to follow this  
Followers 0

Add a Top Menu Dropdown like IPS website


Add a Top Menu Dropdown like IPS website


[size="7"]STEP 1[/size]

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

find:
[code]<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=""}
[/code]

and add before:

[code]

<!-- 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 -->

[/code]

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*/


[size="7"]STEP 2[/size]
download the attached file, unzip it, is a .js file. you have to upload it in your /public/js folder


[size="7"]STEP 3[/size]
Customize the menu code with your link

Azounstone, Havingfun and Breadfan like this


0 Comments

There are no comments to display.