¿Cómo puedo crear un enlace de acción desplegable flotante en _layout.cshmtl usando MVC3 Razor?

Tengo un menú de navegación que se muestra horizontalmente así.

                <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About Us", "About_Us", "Home")</li>
                    <li>@Html.ActionLink("What We Do", "What_We_Do", "Home")</li>
                    <li>@Html.ActionLink("FAQ's", "Answers_To_Questions", "Home")</li>
                    <li>@Html.ActionLink("Deed Transfer Gurantee's", "Deed_Transfer_Guarantee", "Home")
                    </li>
                    <li>@Html.ActionLink("Power Point", "Index", "Home")</li>
                    <li>@Html.ActionLink("Get Help", "Index", "Home")</li>
                    <li>@Html.ActionLink("Mortgage Cancellation", "Index", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Index", "Home")</li>
                </ul>
            </div>

Estoy buscando una manera de crear un enlace desplegable para que sea visible solo cuando se pasa el mouse sobre el enlace específico. Necesito el ActionLink de Deed_Transfer_Guarantee para mostrar otro ActionLink cuando se pasa el cursor por encima de Deed_Transfer_Guarantee. Todavía no he podido encontrar un ejemplo claro de esto. ¡Gracias de antemano por cualquier ayuda!

preguntado el 12 de junio de 12 a las 20:06

Si está tratando de hacer que aparezca algo cuando pasa el mouse, esta pregunta no se trata realmente de MVC, C # o Razor; debería mirar el HTML/CSS. Como un aparte, le sugiero lee este cómic :) -

3 Respuestas

Consulta este muestra de jquery. Todo lo que tienes que hacer es reemplazar "<span> ***</span> " con un hipervínculo

Respondido el 12 de junio de 12 a las 20:06

puede ser que esto pueda ayudar:

$("#menu li a").each(function(){
     var $this = $(this);
     $("<a></a>").html($this.html()).attr("href",$this.attr("href")).addClass("dropdown").slideUp(0).appendTo($this);
}).hover(function(){
    $("a",$(this)).slideDown(500);        
}
,function(){
     $("a",$(this)).slideUp(500);      
});

y luego necesitas algo de css:

#menu li>a{position:relative;}
#menu li a a.dropdown {position:absolute;left:0px;top:100%;}

Creo que esto puede hacer el trabajo.

Respondido el 12 de junio de 12 a las 20:06

¡Gracias! Eso es lo que necesitaba. Tendré que trabajar un poco con eso, pero definitivamente es lo que necesito para ir en la dirección correcta. ¡Muchas gracias! - Bazinga

Creo que usar una nueva etiqueta li le dará un menú desplegable en lugar de un "deslizamiento" en el ejemplo de jquery en línea. Esta es esencialmente la respuesta de Bumble Bee.

<script> 
$(document).ready(function(){

$("#Deed Transfer Gurantee's").hover(function(){
 $(this).append($('<li>@Html.ActionLink(@*whatever parameters you need*@)</li>'));
    });
 });
</script>

Respondido el 12 de junio de 12 a las 20:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.