Foros del Web » Programando para Internet » Javascript »

Menu

Estas en el tema de Menu en el foro de Javascript en Foros del Web. Hola amigos, Deseo implementar un menú en mi web como el de esta página cfn.fin.ec pero no encuentro ningún menú que haga ese efecto de ...
  #1 (permalink)  
Antiguo 22/07/2009, 10:43
 
Fecha de Ingreso: enero-2009
Mensajes: 28
Antigüedad: 15 años, 3 meses
Puntos: 0
Menu

Hola amigos,


Deseo implementar un menú en mi web como el de esta página cfn.fin.ec pero no encuentro ningún menú que haga ese efecto de deslizarse si tienen algún código o menú que haga eso seria de gran ayuda.

Gracias.
  #2 (permalink)  
Antiguo 22/07/2009, 14:42
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: Menu

Hola

Mira aquí, parece que lo buscas

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 22/07/2009, 15:22
 
Fecha de Ingreso: junio-2008
Mensajes: 250
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Menu

Hola a tod@s como escribi en otros mensajes estoy intentando realizar un menu dinamico a traves del los menus deslizantes que podemos ver en la web http://www.dynamicdrive.com/dynamici...ordionmenu.htm este acordeon creado con javascript me funciona correctamente pero lo que quiero hacer ahora es hacerlo dinamico que a traves de una base de datos pueda crear como eliminar botones y submenus. El código que tengo hasta ahora es el siguiente.
Código PHP:
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="botonera.ascx.vb" Inherits="include_botonera" %>
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml"><head>

<
title>Glossy Accordion Menu</title>
<%--
No hacer caso a esto errores ya que la ruta verdadera es esta ya que con "../js/jquery.js" es cuando realmente no funciona--%>
<
link rel="stylesheet" type="text/css" href="css/mainstyle.css"/>

<
script type="text/javascript" src "js/jquery.js"></script>

<script type="text/javascript" src="js/ddaccordion.js">
</script>
<script type="text/javascript">
ddaccordion.init({
    headerclass: "submenuheader", //Shared CSS class name of headers group
    contentclass: "submenu", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
        myiframe=window.frames["myiframe"]
        if (expandedindices.length>0 && expandedindices[expandedindices.length-1]>=2)
            myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
        if (state=="block" && isuseractivated==true && index>=2){ //if header is expanded and as the result of the user initiated action
            myiframe.location.replace(header.getAttribute('href'))
        }
    }
})

</script><style type="text/css">
.submenu{display: none}
</style>

<style type="text/css">

.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: blue url(img/glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative;
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(glossyback2.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}

</style>

<link media="all" href="../css/widget04.css" type="text/css" rel="stylesheet"/></head><body>


<script type="text/javascript">
if (showincontentheader)
document.write('<div id="topbanner" align="left">'+revised_ranban[ran_num]+'</div>')
</script>
<!--webbot bot="HTMLMarkup" startspan -->
<div class="glossymenu">
<a class="menuitem" href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a class="menuitem submenuheader" href="http://www.dynamicdrive.com/style/"><span class="accordprefix"></span>CSS Examples<span class="accordsuffix"><img alt="" src="../img/plus.gif" class="statusicon" id="IMG1"/></span></a>
<div style="display: none;" class="submenu">
    

    <asp:BulletedList ID="BulletedList1" runat="server">
        <asp:ListItem>
            
        </asp:ListItem>
        
        
    
    </asp:BulletedList>
    <asp:Button ID="Button1" runat="server" Text="Button" />
    <asp:BulletedList ID="BulletedList2" runat="server" Width="168px">
        <asp:ListItem>hola</asp:ListItem>
        <asp:ListItem></asp:ListItem>
        
    </asp:BulletedList>
    <%--<ul>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links &amp; Buttons</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
    </ul>--%></div>
<a class="menuitem" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a class="menuitem" href="http://www.javascriptkit.com/domref/">DOM Reference</a>
<a class="menuitem submenuheader" href="http://www.cssdrive.com/"><span class="accordprefix"></span>CSS Drive<span class="accordsuffix"><img alt="" src="../img/plus.gif" class="statusicon"/></span></a>
<div style="display: none;" class="submenu">
    <ul>
    <li><a href="http://www.cssdrive.com/">CSS Gallery</a></li>
    <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
    <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
    <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
    <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
    </ul>
</div>
<a class="menuitem" href="http://www.codingforums.com/" style="border-bottom-width: 0pt;">Coding Forums</a>        
</div>
    <!--webbot bot="HTMLMarkup" endspan i-checksum="12501" -->

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-55377-2");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</html> 
y en aspx

Código PHP:
Partial Class include_botonera
    Inherits System
.Web.UI.UserControl

    
    
'Protected Sub BulletedList1_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.BulletedListEventArgs) Handles BulletedList1.Click
    '    
For As Integer 1 To 10
    
'        Me.BulletedList1.Items=
    '    
Next

    
'End Sub



    

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        For x As Integer = 1 To 10
            Me.BulletedList2.Items.Insert(0, New ListItem("2 CV", "Coche"))
        Next
    End Sub

    Protected Sub BulletedList2_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.BulletedListEventArgs) Handles BulletedList2.Click
    End Sub
End Class

pero me da los siguientes errores 
[QUOTE]'
BulletedList2' no es un miembro de 'include_botonera    
[/QUOTE
  #4 (permalink)  
Antiguo 22/07/2009, 15:42
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: Menu

Hola, igolfi, ¿sabes que estás pisando el tema abierto por lobofer?

Abre otra consulta, es cuestión de ordenación de los foros. Además lo que planteas no tiene mucho que ver con javascript, ya que esa parte ya la tienes, solo has de incrustar en ella la parte de aspx

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #5 (permalink)  
Antiguo 24/09/2009, 14:05
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 17 años
Puntos: 3
Respuesta: Menu

Cita:
Iniciado por lobofer Ver Mensaje
Hola amigos,


Deseo implementar un menú en mi web como el de esta página cfn.fin.ec pero no encuentro ningún menú que haga ese efecto de deslizarse si tienen algún código o menú que haga eso seria de gran ayuda.

Gracias.
Hola, Dreamweaver CS3 tiene un menu como ese, solo tienes que crear uno y despues pegar los pedasos de codigo, yo de ahi saque este www.juegos-intimos.com/home.php, ojo que es un sexshop , pese a ser vertical, es lo que tu estas buscando.

index.html
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">elemento 1</a>
<ul>
<li><a href="#">elemento 1.1</a></li>
<li><a href="#">elemento 1.2</a></li>
<li><a href="#">elemento 1.3</a></li>
</ul>
</li>
<li><a href="#">elemento 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">elemento 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">elemento 3.1</a>
<ul>
<li><a href="#">elemento 3.1.1</a></li>
<li><a href="#">elemento 3.1.2</a></li>
</ul>
</li>
<li><a href="#">elemento 3.2</a></li>
<li><a href="#">elemento 3.3</a></li>
</ul>
</li>
<li><a href="#">elemento 4</a></li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Archivos javascript y css
http://www.profesionales-ar.com.ar/SpryAssets.rar
Espero que te ayude en algo
Saludos

Última edición por Gustavo1973; 24/09/2009 a las 14:11
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:50.