Ir ao conteúdo
  • Cadastre-se

Arrumar Menu ? Sub Menu ?


FabianoS

Posts recomendados

então gente to começando a aprender a programar html, javascript, e css e to com esse menu que peguei na internet. e eu quero adicionar o sub menus nele sem estraga o layout e não estou conseguindo alguém ajuda ?

 

Codigo Html 

<html><head><title>Menu</title><meta charset="UTF-8"/><script type="text/javascript" src="javascript.js"></script><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="sse3">  <div id="sses3">    <ul>      <li><a href="?menu=3&skin=1&p=Javascript-Menus">Javascript Menus</a></li>      <li><a href="?menu=3&skin=1&p=Horizontal-Menus">Horizontal Menus</a></li>      <li><a href="?menu=3&skin=1&p=Web-Menus">Web Menus</a></li>    </ul>  </div></div></body></html>

esse e o javascript 

/*! Visit www.menucool.com for source code, other menu scripts and web UI controls*  Please keep this notice intact. Thank you. */var sse3 = function () {    var speed = 8;    return {        initMenu: function () {            var m = document.getElementById('sses3');            if (!m) return;            m.style.width = m.getElementsByTagName("ul")[0].offsetWidth + 1 + "px";            var lis = m.getElementsByTagName('li');            var a = m.getElementsByTagName("a");            var url = document.location.href.toLowerCase();            var k = -1;            var nLength = -1;            var slip = [];            for (i = 0; i < a.length; i++) {                if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {                    k = i;                    nLength = a[i].href.length;                }            }            if (k == -1 && /:\/\/(?:www\.)?[^.\/]+?\.[^.\/]+\/?$/.test) {                for (var i = 0; i < a.length; i++) {                    if (a[i].getAttribute("maptopuredomain") == "true") {                        k = i;                        break;                    }                }                if (k == -1 && a[0].getAttribute("maptopuredomain") != "false")                    k = 0;            }            for (var i = 0; i < lis.length; i++) {                slip[i] = document.createElement('div');                slip[i].className = 'slip';                slip[i].style.width = lis[i].offsetWidth + "px";                slip[i].style.height = lis[i].offsetHeight + "px";                slip[i].style.left = lis[i].offsetWidth + 1 + "px"; // +1 to eliminate an gap color in IE5 or No DOCTYPE                lis[i].appendChild(slip[i]);                lis[i].onmouseover = function () {                    clearInterval(this.t);                    sse3.move(this, 0);                };                lis[i].onmouseout = function () {                    clearInterval(this.t);                    sse3.move(this, 1);                }            }            if (k > -1) {                slip[k].style.display = 'none';                lis[k].className = 'current';            }        },        move: function (li, direction) {            var tabs = li.childNodes;            var slipobj = tabs[tabs.length - 1];            if (direction == 0) {                li.t = setInterval(function () { if (slipobj.offsetLeft <= 0) { clearInterval(li.t); } else { sse3.moveLeft(slipobj); } }, 15);            }            else {                li.t = setInterval(function () { if (slipobj.offsetLeft >= slipobj.offsetWidth) { clearInterval(li.t); } else { sse3.moveRight(slipobj); } }, 15);            }        },        moveLeft: function (obj) {            if (obj.offsetLeft < 3) {                obj.style.left = "0px";            }            else {                obj.style.left = obj.offsetLeft-Math.ceil(obj.offsetLeft / speed) + "px";            }        },        moveRight: function (obj) {            obj.style.left = obj.offsetLeft + 3 + "px";        }    };} ();if (window.addEventListener) {    window.addEventListener("load", sse3.initMenu, false);}else if (window.attachEvent) {    window.attachEvent("onload", sse3.initMenu);}else {    window["onload"] = sse3.initMenu;}

e esse  e css 

/* Visit http://www.menucool.com/horizontal/javascript-menu for source code and other menu CSS templates */.menu{display:block;}#sse3{    background-color: #999;    height: 50px;    clear:both;    text-align:center;/*For IE5 or IE No DOCTYPE*/    border-radius: 4px;    -moz-border-radius: 4px;    -webkit-border-radius: 4px;}        #sses3{    margin: 0 auto;/*If you don't want the menu center aligned, remove this line and above text-align:center*/    border-left:solid 1px white;}        #sses3 ul{    font: normal 13px Arial;    list-style-type: none;    float:left;    padding:0;margin:0;}        #sses3 li{    background: #F90;    line-height: 50px;    position: relative;    overflow: hidden;/*used to hide slip*/    z-index: 0;    float:left;    list-style-type: none;    padding:0;margin:0;background-image:none;    border-right:solid 1px white;}        #sses3 li.current, #sses3 .slip{    background-color: #666;}        #sses3 li a{    text-align: center;    text-decoration: none;    padding: 0 30px;/*30px is used to adjust the distance between each menu item. Now the distance is 30+30=60px.*/    /*width: 100px;*/ /*If you prefer a fixed width, uncomment this line and comment out above line*/    color: white;    display: block;    z-index: 2;    white-space:nowrap;}        #sses3 li.current a{    color: white;}        #sses3 .slip{    position: absolute;    top: 0;    z-index: -1;}
Link para o comentário
Compartilhar em outros sites

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...