SideBar - czyli pasek z nawigacją u boku ekranu

**TRACKER** · 17 Marca 2009

Witam, oto następny mój tutorial, tym razem zajmiemy się "Sidebar'em"

Demo dostępne jest tu: KLIK, oraz tu: KLIK

Pliki potrzebne do działania znajdują się: tutaj - wszystkie pliki z owego archiwum wrzuć do głównego katalogu forum.

Aby pasek działał w naszym IP.Board należy...

Przejść do: ACP - Look & Feel -> Wybór skina - Edit board header and footer wrapper

Znajdź:

<% CSS %>

Dodaj poniżej:

<style media="all" type="text/css">
   body{
	   position:relative;
	   paddign:0px;
	   font-size:100%;
   }

   h2{
	   color:#FFFFFF;
	   font-size:90%;
	   font-family:arial;
	   margin:10px 10px 10px 10px;
	   font-weight:bold;
   }

   h2 span{
	   font-size:105%;
	   font-weight:normal;
   }

   ul{
	   margin:0px 0px 0px 0px;
	   padding:0px 0px 0px 0px;
   }

   li{
	   margin:0px 10px 3px 10px;
	   padding:2px;
	   list-style-type:none;
	   display:block;
	   background-color:#DA1074;
	   width:177px;
   }

   li a{
	   width:100%;
   }

   li a:link,
   li a:visited{
	   color:#FFFFFF;
	   font-family:verdana;
	   font-size:70%;
	   text-decoration:none;
	   display:block;
	   margin:0px 0px 0px 0px;
	   padding:0px;
	   width:100%;
   }

   li a:hover{
	   color:#FFFFFF;
	   text-decoration:underline;
   }

   #sideBar{
	   position: absolute;
	   width: auto;
	   height: auto;
	   top: 200px;
	   right:-7px;
	   background-image:url(images/background.gif);
	   background-position:top left;
	   background-repeat:repeat-y;
   }

   #sideBarTab{
	   float:left;
	   height:137px;
	   width:28px;
   }

   #sideBarTab img{
	   border:0px solid #FFFFFF;
   }

   #sideBarContents{
	   overflow:hidden !important;
   }

   #sideBarContentsInner{
	   width:200px;
   }
 </style>

Następnie znowu wyszukaj:

<% javascript %>

Dodaj poniżej:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>

Ponownie znajdź:

<body>

Dodaj poniżej:

<div id="sideBar">
  <a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>

  <div id="sideBarContents" style="width:0px;">
	  <div id="sideBarContentsInner">
		  <h2>side<span>bar</span></h2>
		  <ul>
			  <li><a href="#">Link Pierwszy</a></li>
			  <li><a href="#">Link Drugi</a></li>
			  <li><a href="#">Link Trzeci</a></li>
			  <li><a href="#">Link Czwarty</a></li>
			  <li><a href="#">Link Piąty</a></li>
		  </ul>
	  </div>
  </div>
</div>

Wszelkie zmiany(kolory, grubość czcionki, linki itp) należy również odpowiednio zmieniać modyfikując powyższy kod :/

Miłego korzystania

Tutorial copyright by TRAC KER z pozdrowieniami dla forum.invisionize.pl

Zaloguj się

SideBar - czyli pasek z nawigacją u boku ekranu

Rekomendowane odpowiedzi

TRACKER

Odnośnik do komentarza

Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Zarejestruj nowe konto

Zaloguj się

Ostatnio przeglądający 0 użytkowników

Pliki

Cała aktywność

Przeglądaj

Powiadomienie o plikach cookie