Skocz do zawartości


- - - - -

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


  • Proszę się zalogować aby odpowiedzieć
Brak odpowiedzi na ten temat

#1 icebox

icebox

    Coś tam wie o IP.Board

  • Premium
  • PipPip
  • 113 postów
  • Płeć:Mężczyzna
  • Skąd:Obertshausen - Niemcy <--> Poland-Wrocław
  • Wersja:IP.Board 3.2.x

Napisany 12 marzec 2011 - 20:31

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

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

#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; 
} 

Załączone pliki




Modyfikacje IP.Board 2.3.x i 2.2.x: (DB23) Activity and Experience , [Artykuł/Tutorial] Ipla.tv Tuner( IP.Board 2.3.x i 2.2.x ) | IP.Board 2.3.x i 2.2.x , Linki jak na Forum IPS'u , [Invisionize.eu] Starting from Scratch - Hello World! - An IPB.Board 3 mod - Part 2 , [Invisionize.eu] IP.Board iPhone App Updated


1 użytkowników czyta ten temat

0 użytkowników, 1 gości, 0 anonimowych użytkowników