Skocz do zawartości
Zaloguj się, aby obserwować  
icebox

[Artykuł][Tutorial] Dodawanie górnego menu

Polecane posty

1) Pobierz plik ips.mastnav.js i wyrzucić go do public / JS !

2) Następnie przejdź do ACP -> Wygląd -> Twój styl -> Szablony główne ->, skopiuj poniższy kod i wklej go zaraz po <div id = "ipbwrapper ">

nie zapominamy o zmianie nazw i odnośników w kodzie

<!-- START MASTHEAD NAV --> 

<script type='text/javascript' src='..public/js/ips.mastnav.js'></script>

<div id="masthead">
<ul id="primary_navigation">
<li id="nav_home"><a href="http://www.invisionpower.com">IPS Home Page</a></li>
<li id="nav_products">
<a href="http://www.invisionpower.com/products/">Products</a>
<ul class="main_menu" id="nav_products_menu" style="display: none;">
<li><a title="IP.Board: Community Discussion Board" href="http://www.invisionpower.com/products/board/">IP.Board</a></li>
<li><a title="IP.Blog: Community Blogging Service" href="http://www.invisionpower.com/products/blog/">IP.Blog</a></li>
<li><a title="IP.Content: Content Creation System" href="http://www.invisionpower.com/products/content/">IP.Content</a></li>
<li><a title="IP.Gallery: Community Image Gallery" href="http://www.invisionpower.com/products/gallery/">IP.Gallery</a></li>

<li><a title="IP.Chat: Realtime Community Chatroom" href="http://www.invisionpower.com/products/chat/">IP.Chat</a></li>
<li><a title="IP.Downloads: Download Manager" href="http://www.invisionpower.com/products/downloads/">IP.Downloads</a></li>
<li><a title="IP.Converge: Single Sign-on For Communities" href="/products/converge/">IP.Converge</a></li>
<li><a title="Spam Monitoring: Protecting Communities From Spam" href="http://www.invisionpower.com/products/spammonitor/">Spam Monitor Service</a></li>
<!--<li><a href='http://www.invisionpower.com/products/community/' title=''>Community Projects</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="/hosting">Hosted Communities</a>
<ul class="main_menu" id="nav_hosted_menu" style="display: none;">
<li><a title="Go to standard packages" href="http://www.invisionpower.com/hosting/">Standard Packages</a></li>
<li><a title="Go to Advanced packages" href="http://www.invisionpower.com/hosting/advanced.php">Advanced Packages</a></li>
<li><a title="Go to website hosting" href="http://www.invisionpower.com/hosting/website.php">Website Hosting</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 title="Go to our Services overview" href="http://www.invisionpower.com/services/">Services</a>
<!--<ul id='nav_services_menu' class='main_menu'>
<li><a href='#' title=''>Pre-launch</a></li>
<li><a href='#' title=''>Software Modifications</a></li>
<li><a href='#' title=''>Single Sign On Integration</a></li>
<li><a href='#' title=''>Custom Licensing</a></li>
<li><a href='#' title=''>Enterprise Hosting</a></li>
</ul>
<script type='text/javascript'>
ips.menus['services'] = new ips.menu( $('nav_services'), $('nav_services_menu') );
</script>-->
</li>
<li id="nav_support">

<a href="#">Support</a>
<ul class="main_menu" id="nav_support_menu" style="display: none;">
<li><a title="Go to the client area" href="http://www.invisionpower.com/customer/">Client Area</a></li>
<li><a title="Go to the resource site" href="http://community.invisionpower.com/resources/index.html">Documentation</a></li>
<li><a title="Go to the resource site" href="http://community.invisionpower.com/resources/index.html">Client Resources</a></li>
<li><a title="Our community support forums" href="http://community.invisionpower.com">IPS Community</a></li>

<li><a title="Go to the FAQs" href="http://www.invisionpower.com/company/faq.php">FAQs</a></li>
<li><a title="" href="http://www.invisionpower.com/hosting/status.php">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 title="Go to the client area" href="http://www.invisionpower.com/customer/">Client Area</a>

</li>
<li id="nav_contact"><a title="Get in touch" href="http://www.invisionpower.com/company/contact.php">Contact Us »</a></li>

</ul>

</div>

<!-- END MAST NAV --> [/php]

3) Następnie przejdź na kartę CSS -> [b]header_bar.css[/b] i wklej następujący kod:

[php]#masthead {
background:repeat scroll 0 0 #2F2F2F;
color:#FFFFFF;
height:35px;
}
#ips_main_branding {
display:block;
float:right;
margin-left:10px;
margin-top:8px;
}
#primary_navigation {
float:right;
margin-right:15px;
margin-top:3px;
position:relative;
z-index:10000;
}
#primary_navigation li {
float:left;
font-family:helvetica,arial,tahoma,sans-serif;
font-size:14px;
margin-right:22px;
text-shadow:1px 1px 2px #0A1A2B;
}
#primary_navigation li:last-child {
margin-right:0;
}
#primary_navigation li {
float:left;
font-size:14px;
margin-right:15px;
}
#primary_navigation > li > a {
color:#FFFFFF;
display:block;
padding:7px 8px;
text-decoration:none;
}
#primary_navigation li a:hover, #primary_navigation li.active > a {
-moz-border-radius:4px 4px 4px 4px;
background:none repeat scroll 0 0 #0D1B2A;
color:#26D0CC;
}
#primary_navigation .main_menu {
-moz-border-radius:4px 4px 4px 4px;
background:none repeat scroll 0 0 #0D1B2A;
display:block;
margin-top:-5px;
min-width:150px;
padding:10px 5px 5px;
z-index:50000;
}
#primary_navigation .main_menu li {
display:block;
float:none;
font-size:12px;
padding:4px 6px;
}
#primary_navigation .main_menu li a {
color:#FFFFFF;
display:block;
padding:4px;
text-decoration:none;
text-shadow:none;
}
#primary_navigation .main_menu li a:hover {
color:#26D0CC;
}

ips.mastnav.rar

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Zaloguj się, aby obserwować  

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.

×

Ważne informacje

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies.