Sexy sliding JavaScript side bar menu using mootools

Sexy culisante JavaScript bara de meniu lateral folosind mootools


Atunci când încearcă să concepem modalităţile în care spaţiul poate fi salvat pe o pagina web, am decis un meniu de alunecare ar lucra bine cum se arată în imaginile de mai jos.






Acum, pentru această soluţie am decis să utilizeze mootools datorită netezime efectelor lor, cu toate acestea, acest lucru ar putea fi la fel de uşor de dezvoltat în script.aculo.us sau alte biblioteci JavaScript.
cod

Codul este foarte simplă şi este după cum urmează:
CSS

Cod:

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

Cod:

<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 One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
         
        </div>
    </div>
 
</div>

Aşa cum se arată în care codul nu este foarte complexă. HTML cuprinde un DIV care conţine (cu un ID de bara laterală), apoi în cadrul acestei avem o imagine filă legat (cu un ID de sideBarTab), urmată de conţinutul bara laterală cuprinse într-un DIV (cu un ID de sideBarContents) şi sub conţinute într-un alt DIV (cu un ID de sideBarContentsInner).

SideBarContents DIV are un stil de linie aplicat setarea lăţimea la zero. Acest lucru este de a permite JavaScript pentru a redimensiona regiune folosind mootools (Unele browsere sunt un pic trăsură pentru două persoane atunci când încearcă să schimbe stilurile care sunt stabilite într-o foaie de stil extern). Acest DIV este, de asemenea, setat pentru a avea un exces ascunse care produc efectul că acest conţinut este culisant inch

Punctele de remarcat în cadrul CSS include lăţimea setat pe sideBarContentsInner DIV. Această lăţime trebuie ajustată după cum necesare pentru a satisface cerinţele dumneavoastră catadicsi (Este setat la 200px cu scopul de a demonstraţiei).

De asemenea, pentru a repoziţiona bara ajusta pur şi simplu stiluri postioning aplicate pe bara laterală DIV (dreapta adică şi partea de sus).

În cele din urmă va trebui să includă mootools.js şi-side bar.js la cap documentului în ordinea indicată pentru ca aceasta să funcţioneze. Au un joc cu demo-ul de mai jos şi descărca codul.
demo

Culisante JavaScript bara laterală meniu demo..

capcane

În prezent, cu această versiune cred că pot exista unele probleme CSS în Safari, dar încă nu am avut timp pentru a testa pe deplin şi rezolva bug potenţial.

Capcană lângă nota este lipsa de degradabilitate cu JavaScript oprit, cu toate acestea, acest lucru va fi stabilit după cum se menţionează mai jos.
viitor

Sunt de planificare pentru a dezvolta o noua versiune a bara laterală, care va degrada elegant înapoi în structura a site-ului atunci când JavaScript este oprit. Acest lucru va oferi o versiune mai accesibilă.

Alte îmbunătăţiri includ adăugarea unui eveniment de presa cheie la fila permite utilizatorilor fără un mouse pentru a produce acelaşi efect (din nou, important pentru accesibilitatea).

Alte îmbunătăţiri includ considerată introducerea de mai multe file. Acest lucru ar permite o mai mare "spaţiu de depozitare", oferind în acelaşi timp, de asemenea, flexibilitate şi scalabilitate.
descărca

Descărcaţi alunecare JavaScript bara de meniul din partea.

Tutorial tradus si adaptat de catre: Dark

Pentru a vedea acest meniu trebuie sa postati

Sursa: www.andrewsellick.com

Sexy

misto