Ir para conteúdo
Fórum Script Brasil
  • 0

Menu Dinamico Ajuda

TMD

Perguntado por TMD,

 Share

Pergunta

TMD

TMD

Postado
Postado

boas malta..eu sou um novo utilizador do php e secalhar o k vou perguntar até é de noob mas pronto

é assim eu já andei a peskixar bastante, incluve aqui no forum, mas não consegui encontrar propriamente uma resposta para a minha duvida

o que eu quero é ter um menu dinamico em javascript na minha página (eu já tenho o menu)

mas tem uma condição...eu quero k o menu fique num sitio especifico da página...e não no topo da pagina..nem a (ex: 20 ou 30) pixels da margem

haverá alguma propriedade k deverei colocar no menu para faxer isso?

eu quero colocar o menu dentro de uma tabela...mas nos ficheiros .js correspondentes ao menu eu só encontro as propriedades de "margin: 0;" e "padding: 280px;"

estas propriedades definem os pixels a que o menu se encontra da margem da página...mas eu não quero isto...

quero colocar ele dentro de um tabela que tenho no site

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
TMD

TMD

Postado
  • Autor
Postado 

<script language="JavaScript" src="menu.js" type="text/JavaScript"></script>

<style type="text/css">
<!--
@import"menu-horiz.css";
-->

body {
margin: 0;
padding: 280px;
background: #FFF;
color: #666;
}

h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}

p {
font: 11px Arial, Helvetica, sans-serif;
}

a {
color: #900;
text-decoration: none;
}

a:hover {
background: #900;
color: #FFF;
}

#MenuHorizontal {
/* float: left; */
background: *#FFF;
height: 26px;
/* width: 500px; */
}

</style>
</head>
<body>
<h1 align="center">&nbsp;</h1>
<div id="MenuHorizontal">
    <div align="center">
      <ul id="nav">
        <li><a href="http://www.google.pt">Google</a></li>
          <li><a href="#" class="daddy1">Work</a>
            <ul>
              <li><a href="#" class="daddy">Websites</a>
                <ul>
                  <li><a href="#">qrayg</a></li>
                            <li><a href="#">qArcade</a></li>
                            <li><a href="#">qLoM</a></li>
                            <li><a href="#">qDT</a></li>
                </ul>
              </li>
                    <li><a href="#">Pen and Ink</a></li>
                    <li><a href="#">Free Interfaces</a></li>
            </ul>
          </li>
          <li><a href="#" class="daddy1">Learn</a>
            <ul>
              <li><a href="#" class="daddy">Fireworks</a>
                <ul>
                  <li><a href="#">aquaButton</a></li>
                            <li><a href="#">aquaButton2</a></li>
                            <li><a href="#">waterDrop</a></li>
                            <li><a href="#" class="daddy">lightFX</a>
                              <ul>
                                <li><a href="#">Mask</a></li>
                                            <li><a href="#">Button</a></li>
                                            <li><a href="#" class="daddy">Menu</a>
                                                      
                              <ul>
                                <li><a href="menu-principal-horiz.html">Horizontal</a></li>
                                                                    <li><a href="menu-principal-vert.html">Vertical</a></li>
                                              </ul
              >
                                            </li>
                                            <li><a href="#">Layer</a></li>
                              </ul>
                            </li>
                            <li><a href="#">lightFX2</a></li>
                </ul>
              </li>
                    <li><a href="#" class="daddy">CSS</a>
                      <ul>
                        <li><a href="#">footerStick</a></li>
                                <li><a href="#">spriteNav</a></li>
                                <li><a href="#">@import</a></li>
                      </ul>
                    </li>
            </ul>
          </li>
          <li><a href="#">Info</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </div>
</div>
<p align="center">&nbsp;</p>

</body>
</html>
aqui é o ficheiro em php onde o menu está incluido 
/* menu-horiz.css */
#nav  {
    float: left;
      width: auto;
    list-style: none;
    background: #EEE;
      padding: 0;
    border: 1px solid #FFF;
    border-width: 1px 0;
    margin: 0 0 1em 0;
      color: #666;     
      font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;
}

#nav ul  {
    float: left;
      width: auto;
    list-style: none;
    background: #EEE;
      padding: 0;
    border: 1px solid #FFF; #eda;
    border-width: 1px 0;
    margin: 0 0 1em 0;
      color: #666;     
      font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;
}

#nav a {
    display: block;
    width: 8em;             
    w\idth: 4em;              
    color: #7C6240;
    text-decoration: none;
    padding: 0.25em 2em;
      border: 1px solid #FFF;
      border-right-color: #CCC; 
      border-bottom-color: #CCC;
      color: #666;
      font: bold 10px/14px Verdana, Arial, Helvetica, sans-serif;
}

#nav a:hover {
    background: #CCC;
}

#nav a.daddy { 
    background: url(rightarrow2.gif) 96% 50% no-repeat;
}

#nav a.daddy:hover {
    background: #CCC url(rightarrow2.gif) 96% 50% no-repeat;
}

#nav a.daddy1 {
    background: url(downarrow2.gif) 8% 50% no-repeat;
}

#nav a.daddy1:hover {
    background: #CCC url(downarrow2.gif) 8% 50% no-repeat;
}

#nav li {
    float: left;    
    padding: 0;
    width: 8em;     
}

#nav li ul  {
    position: absolute;
    left: -999em;
    height: auto;
      width: 14.2em;
    w\idth: 13.2em; 
    font-weight: normal;
    border-width: 1px; 
    margin: 0;
    background: #CCC;
}

#nav li li {
    width: 13.2em;
}

#nav li ul a {
    width: 13.2em;
    w\idth: 9em; 
}

#nav li ul ul {
    margin: -1.75em 0 0 13.2em; 
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul, #nav li.sfhover ul ul ul ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul, #nav li li li li li.sfhover ul  {
    left: auto;
    background: #EEE;
}


#nav li:hover, #nav li.sfhover {
    background: #CCC; 
}
este código é o ficheiro .css que é onde se encontra todas as configurações do menu 
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

e este é o ficheiro menu.js que contem as configurões do onmouseover e etc

Link para o comentário
Compartilhar em outros sites
  • 0
TMD

TMD

Postado
  • Autor
Postado (editado)

eheh econsegui achar um menu tal e qual como eu queria...

vou deixar aqui o código pois pode haver alguém na mesma situação que eu :D 

<html>
<head>
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: gray;
}

</style>

&lt;script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.javascriptkit.com">Menu 1</a>'
menu1[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href="http://www.javascriptkit.com">Menu 4</a>'
menu2[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu2[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu2[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href="http://www.javascriptkit.com">Menu 5</a>'
menu3[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu3[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu3[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href="http://www.javascriptkit.com">Menu 6</a>'
menu4[1]='<a href="http://www.freewarejava.com">Freewarejava.com</a>'
menu4[2]='<a href="http://codingforums.com">Coding Forums</a>'
menu4[3]='<a href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 5, and so on
var menu5=new Array()
menu5[0]='<a href="http://cnn.com">CNN</a>'
menu5[1]='<a href="http://msnbc.com">MSNBC</a>'
menu5[2]='<a href="http://news.bbc.co.uk">BBC News</a>'
        
var menuwidth='165px' //default menu width
var menubgcolor='lightgray'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
</head>
<body vlink="#333333" link="#333333">

<table width="344" height="220" border="1" align="center">
  <tr>
    <td><div align="center">
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">menu 1</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">menu 2</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">menu 3</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()">menu 4</a> |
<a href="default2.htm" onClick="return dropdownmenu(this, event, menu5, '200px')" onMouseout="delayhidemenu()">News Sites</a> (onclick)
    </div></td>
  </tr>
</table>
</body>
</html>

Editado por TMD
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...