Um efeito bem interessante para um menu em html



HTML

    <script type=”text/javascript” language=”javascript” src=”focus_slide.js”></script>

    <ul id=”mContainer”>
    <li><a href=”#” title=”Item One”>Item One</a></li>
    <li><a href=”#” title=”Item Two”>Item Two</a></li>
    <li><a href=”#” title=”Item Three”>Item Three</a></li>
    <li><a href=”#” title=”Item Four”>Item Four</a></li>
    <li><a href=”#” title=”Item Five”>Item Five</a></li>
    </ul>

JavaScript(salve em um arquivo com o nome focus_slide.js)

    /******************************************************
    Focus Slide
    version 1.0
    last revision: 12.17.2004
    steve@slayeroffice.com

    Should you improve upon or
    modify this code, please let me know
    so that I can update the version hosted
    at slayeroffice.

    PLEASE LEAVE THIS NOTICE INTACT!

    ******************************************************/

    //window.onload = init;

    var d=document;        // shortcut reference to the document object
    var activeLI = 0;        // the currently “active” list element - value represents its index in the liObj array
    var zInterval = null;    // interval variable

    var SLIDE_STEP = 8;    // how many pixels to move the sliding div at a time
    var SLIDER_WIDTH = 74;    // the width of the sliding div. used to calculate its left based on the width and left of the active LI element

    function init() {
    // bail out if this is an older browser or Opera which gets the offsets wrong
    // the opera issue is fixable by subtracting the container UL’s width from the offsetLefts…but I dont care enough to do it
    // this does NOT break opera, it just wont get the sliding thing

    if(!document.getElementById || window.opera)return;

    // create references to the LI’s
    mObj = d.getElementById(”mContainer”);
    liObj = mObj.getElementsByTagName(”li”);

    // set up the mouse over events
    for(i=0;i<liObj.length;i++) {
    liObj[i].xid = i;
    liObj[i].onmouseover = function() { initSlide(this.xid); }
    }

    // create the slider object
    slideObj = mObj.appendChild(d.createElement(”div”));
    slideObj.id = “slider”;

    // position the slider over the first LI
    x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5;
    y = liObj[activeLI].offsetTop-3;
    slideObj.style.top = y + “px”;
    slideObj.style.left = x + “px”;
    }

    function initSlide(objIndex) {
    // return if the user is mousing over the currently active LI
    if(objIndex == activeLI)return;
    // clear the interval so we can start it over in a few lines to avoid doubling up on intervals
    clearInterval(zInterval);

    // set the active list item to the object index argument
    activeLI = objIndex;
    // figure out the destination for the sliding div element
    destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5;
    // start the interval
    intervalMethod = function() { doSlide(destinationX); }
    zInterval = setInterval(intervalMethod,10);
    }

    function doSlide(dX) {
    // get the current left of the sliding div
    x = slideObj.offsetLeft;
    if(x+SLIDE_STEP<dX) {
    // div is less than its destination, move it to the right
    x+=SLIDE_STEP;
    slideObj.style.left = x + “px”;
    } else if (x-SLIDE_STEP>dX) {
    // div is more than its destination, move to the left
    x-=SLIDE_STEP;
    slideObj.style.left = x + “px”;
    } else  {
    // div is within the boundaries of its destination. put it where its supposed to be
    // and clear the interval
    slideObj.style.left = dX + “px”;
    clearInterval(zInterval);
    zInterval = null;
    }
    }

CSS

#mContainer {
position:relative;
margin:0 auto;
height:25px;
background-color:#F1F1F1;
border-bottom:2px solid #E2E2E2;
text-align:center;
padding:5px 0 0 0;
}

#mContainer li {
position:relative;
display:inline;
margin:0 10px 0 12px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:0;
z-index:2;
}

#mContainer li a         {text-decoration:none;}
#mContainer li a:link    {color:#999;}
#mContainer li a:visited {color:#333;}
#mContainer li a:hover      {color:#DA0911;}

#slider {
position:absolute;
/*background-color:#CFDCFF;
border:1px solid #78919B;*/
border-bottom:3px solid #DA0911;
width:74px;
height:20px;
padding:0;
z-index:1;
}

Você também acha muito trabalhoso ficar colocando cor um linha sim e outra não em uma tabela? Quem sabe esta dica o ajude :D
Image Hosted by ImageShack.us

HTML

    <table align=”center” id=”default” summary=”Ejemplo de tabla”>
    <caption>
    Autores en InfectedFX.net
    </caption>
    <thead>
    <tr>
    <th>Nombre</th>
    <th>Ocupación</th>
    <th>Website</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
    <td colspan=”3″>Total: 4 Usuarios </td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>Infected-FX</td>
    <td>Diseñador</td>
    <td><a href=”http://www.infectedfx.net”>www</a></td>
    </tr>
    <tr>
    <td>Zetta</td>
    <td>Developer</td>
    <td><a href=”http://www.zetaweb.net”>www</a></td>
    </tr>
    <tr>
    <td>Zillah</td>
    <td>A.I.</td>
    <td><a href=”http://www.blogzillah.com”>www</a></td>
    </tr>
    <tr>
    <td>Hecgo</td>
    <td>Developer</td>
    <td><a href=”http://www.hecgo.com”>www</a></td>
    </tr>
    </tbody>
    </table>

CSS

    #default {
    border-collapse:collapse;
    background-color: #E8E8E8;
    width:100%;
    }
    #default caption{
    background-color:#59819F;
    border-bottom:3px solid #C2DBEF;
    color:#FFF;
    padding:10px;
    text-transform:uppercase;
    }

    #default thead th{
    background-color:#18394F;
    border-bottom:3px solid #59819F;
    color:#FFF;
    padding:5px;
    }

    #default tbody tr td {
    padding: 3px 8px;
    }

    #default tfoot tr td{
    background-color:#59819F;
    color:#FFF;
    padding:4px;
    text-align:center;
    }

    /*/////////////// TABLE DEMO GREEN //////////////////*/

    #demoGreen {
    border-collapse:collapse;
    background-color: #E8E8E8;
    width:100%;
    }
    #demoGreen caption{
    background-color:#99CC00;
    border-bottom:3px solid #669900;
    color:#FFF;
    padding:10px;
    text-transform:uppercase;
    }

    #demoGreen thead th{
    background-color:#333;
    border-bottom:3px solid #000;
    color:#FFF;
    padding:5px;
    }

    #demoGreen tbody tr td {
    padding: 3px 8px;
    }

    #demoGreen tfoot tr td{
    background-color:#666;
    color:#FFF;
    padding:4px;
    text-align:center;
    }

    /*/////////////// TABLE DEMO BLUE //////////////////*/
    #demoBlue {
    border-collapse:collapse;
    background-color: #E8E8E8;
    width:100%;
    }
    #demoBlue caption{
    background-color:#50ADEA;
    border-bottom:3px solid #1975D7;
    color:#FFF;
    padding:10px;
    text-transform:uppercase;
    }

    #demoBlue thead th{
    background-color:#F5F5F5;
    border-bottom:3px solid #CCC;
    color:#666;
    padding:5px;
    }

    #demoBlue tbody tr td {
    padding: 3px 8px;
    }

    #demoBlue tfoot tr td{
    background-color:#E7E7E7;
    color:#B7B7B7;
    padding:4px;
    text-align:center;
    }

JavaScript

    <script type=”text/javascript”>
    // this function is needed to work around
    // a bug in IE related to element attributes
    function hasClass(obj) {
    var result = false;
    if (obj.getAttributeNode(”class”) != null) {
    result = obj.getAttributeNode(”class”).value;
    }
    return result;
    }

    function stripe(id) {

    // the flag we’ll use to keep track of
    // whether the current row is odd or even
    var even = false;

    // if arguments are provided to specify the colours
    // of the even & odd rows, then use the them;
    // otherwise use the following defaults:
    var evenColor = arguments[1] ? arguments[1] : “#F0F8FF”;
    var oddColor = arguments[2] ? arguments[2] : “#C2DBEF”;

    // obtain a reference to the desired table
    // if no such table exists, abort
    var table = document.getElementById(id);
    if (! table) { return; }

    // by definition, tables can have more than one tbody
    // element, so we’ll have to get the list of child
    // <tbody>s
    var tbodies = table.getElementsByTagName(”tbody”);

    // and iterate through them…
    for (var h = 0; h < tbodies.length; h++) {

    // find all the <tr> elements…
    var trs = tbodies[h].getElementsByTagName(”tr”);

    // … and iterate through them
    for (var i = 0; i < trs.length; i++) {

    // avoid rows that have a class attribute
    // or backgroundColor style
    if (! hasClass(trs[i]) &&
    ! trs[i].style.backgroundColor) {

    // get all the cells in this row…
    var tds = trs[i].getElementsByTagName(”td”);

    // and iterate through them…
    for (var j = 0; j < tds.length; j++) {

    var mytd = tds[j];

    // avoid cells that have a class attribute
    // or backgroundColor style
    if (! hasClass(mytd) &&
    ! mytd.style.backgroundColor) {

    mytd.style.backgroundColor =
    even ? evenColor : oddColor;

    }
    }
    }
    // flip from odd to even, or vice-versa
    even = ! even;
    }
    }
    }
    </script>

    <script type=”text/javascript”>
    window.onload = function() {
    stripe(’default’);
    stripe(’demoGreen’, ‘#ECFFAF’, ‘#F3FFCF’);
    stripe(’demoBlue’, ‘#FFFFFF’, ‘#F6F6F6′);
    stripe(’demoRed’, ‘#FFEFEF’, ‘#EFC2C2′);
    }
    </script>

Exemplos

Fonte: http://www.infectedfx.net/

Vou mostrar como fazer um formulário ficar mas atraente usando css e algumas pequenas imagens.

Precisaremos:

    * icon_user.gif
    * icon_pass.gif
    * bgForm.gif

HTML

    <form action=”#” method=”post” name=”formLogin”>
    <fieldset>
    <legend>Acceso a usuarios </legend>
    <p>

    <label for=”username1″ accesskey=”n”>Username: </label>
    <input id=”username1″ name=”username1″ tabindex=”1″ value=”" title=”username1″ type=”text”>
    </p>
    <p>
    <label for=”password2″ accesskey=”e”>Password:</label>
    <input id=”password2″ name=”password2″ tabindex=”2″ title=”password2″ type=”password2″>
    </p>
    <p>

    <input value=”Ingresar” id=”submit3″ class=”button” tabindex=”3″ type=”submit”>
    </p>
    </fieldset>
    </form>

CSS

    .formLogin {
    width: 250px;
    margin:auto;
    font-size:10px;
    }

    .formLogin fieldset {
    background:#F9F9F9 url(pix/bgForm.gif);
    border:1px solid #CCC;
    padding: 10px;
    margin: 0;
    }

    .formLogin fieldset legend {
    color:#666;
    }

    .formLogin label {
    display: block;
    float: left;
    padding: 0;
    width:70px;
    margin:5px 5px 5px 0px;
    }

    .formLogin fieldset label:first-letter {
    color:#999;
    }
    .formLogin input {
    width:50%;
    border:1px solid #A0A0A0;
    font-size:10px;
    padding:3px 0px 3px 25px;
    }
    .formLogin input#username {
    background:#FFF url(pix/icon_user.gif) no-repeat left;
    }
    .formLogin input#password {
    background:#FFF url(pix/icon_pass.gif) no-repeat left;
    }

    .formLogin input.button {
    width:95%;
    background-color:#C2C7C0;
    border:1px solid #A0A0A0;
    padding:3px;
    color:#FFF;
    }

HTML

<div id=”menu”>
<ul id=”menuList”>
<li id=”active”><a href=”#”>Item 01 </a></li>
<li><a href=”#”>Item 02 </a></li>
<li><a href=”#”>Item 03 </a></li>
<li><a href=”#”>Item 04 </a></li>
<li><a href=”#”>item 05 </a></li>
</ul>
</div>

CSS

/* CONTENEDOR DEL MENU*/
#menu {
margin:25px 0px 0px 0px;
padding:0px;
border-bottom:4px solid #000;
}

/* LISTA DEL MENU */
#menuList {
list-style-type: none;
padding:0px 0px 24px 30px;
margin: 0px;
}

/* OPCIONES DEL MENÚ */
#menuList li {
float: left;
height: 24px;
margin: 0px 1px 0 1px;
}

/* LINKS GENERALES EN EL MENÚ*/
#menuList a {
float: left;
display: block;
text-decoration: none;
padding: 5px 15px 5px 15px;
}

#menuList a:link,
#menuList a:visited {
background-color:#CCC;
color: #333;
}

#menuList a:hover {
background: #333; color:#FFF;
}

/* OPCION ACTIVA */
#menuList li#active a:link,
#menuList li#active a:visited {
background-color: #000;
color:#FFF;
}

#menuList li#active a:hover {
background-color:#A90000;
color: #FFF;
}

HTML

    <a title=”Mi Lista” onclick=”show_list(); return false;”  href=”#”>
    <img src=”pulldown.gif” width=”200″  height=”20″ alt=”" />

    </a>
    <div style=”visibility: hidden;” id=”myList” onmouseover=”show_list()” onmouseout=”hide_list()”>
    <ul>
    <li> <a title=”InfectedFX” href=”http://infectedfx.net/”>InfectedFX</a> </li>
    <li> <a title=”KonceptoRadio” href=”http://konceptoradio.com/”>KonceptoRadio</a> </li>
    <li> <a title=”Cinexcepcion” href=”http://cinexcepcion.com/”>Cinexcepci&oacute;n</a> </li>

    <li> <a title=”Go2torials” href=”http://go2torials.com/”>Go2torials</a> </li>
    <li> <a title=”Spiga” href=”http://spiga.com.mx/”>Spiga</a> </li>
    </ul>
    <p class=”close”>
    <a title=”cerrar…” onclick=”hide_list(); return false;”  href=”#”>cerrar</a>

    </p>
    </div>
    </div>

JavaScript

    <script type=”text/javascript”>
    function show_list () { document.getElementById(”myList”).style.visibility = “visible”; }
    function hide_list () { document.getElementById(”myList”).style.visibility = “hidden”; }
    </script>

CSS

    <style type=”text/css” media=”screen”>
    body {
    margin: 0px;
    padding: 0px;
    background-color: #FFF;
    font: 69% Verdana, Arial, Helvetica, sans-serif;
    }

    a    {outline:none; text-decoration:none;}

    /* POSICION */

    #pulldown {
    margin:10%;
    }

    #pulldown img{border:none;}

    /* LISTA */

    #myList {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    display: block;
    margin: 1px 0px 0px 0px;
    padding: 0;
    width: 200px;
    }

    #myList ul  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    #myList ul li a {
    display: block;
    width: 190px;
    padding:3px;
    margin: 2px auto 4px auto;
    border-bottom:1px solid #EEE;
    }

    #myList ul li a:link,
    #myList ul li a:visited{
    background-color:#FFFFFF;
    color: #a80000;
    }
    #myList ul li a:hover {
    background-color: #F7F7F7;
    color: #000000;
    }

    /* BOTON CERRAR */
    .close {margin:0px;}

    .close a{
    text-align:center;
    display:block;
    font-weight:bold;
    padding:3px 0px;
    }

    .close a:link,
    .close a:visited{
    background-color:#EEE;
    color:#333;
    }

    .close a:hover{
    background-color:#990000;
    color:#FFF;
    }
    </style>