asp.net - horizontal - navigation bar apk
Solución programática para cambiar la identificación de navegación para resaltar la página actual ASP.NET (7)
Agregue una propiedad a su página maestra llamada Sección de página
public string PageSection { get; set; }
Agregue una directiva de página MasterType a la parte superior de sus páginas de contenido
<%@ MasterType VirtualPath="~/foo.master" %>
En el código de la página de contenido detrás, configure la propiedad SectionSection de la página maestra
Master.PageSection = "home";
En tu página maestra, haz que la etiqueta corporal sea una etiqueta de servidor
<body ID="bodyTag" runat="server">
En el código de la página maestra detrás, use esa propiedad para establecer una clase en la etiqueta del cuerpo
bodyTag.Attributes.Add("class", this.PageSection);
Dale a cada uno de tus elementos de navegación un atributo de ID único.
En su CSS, cambie la visualización de los elementos de navegación en función de la clase de página actual
.home #homeNavItem,
.contact #contactNavItem
{
color: #f00;
}
Estoy escribiendo un sitio web con Visual Studio 2008 y ASP.NET 3.5. Tengo una página maestra configurada para simplificar el diseño y para mantener las páginas de contenido en lugar de contenido y diseño.
La navegación es list, css''d así que parece una barra. Para resaltar la página en la barra, el elemento de la lista debe verse así <li id="current"> . No quiero usar <asp:ContentPlaceHolder> si puedo evitarlo. ¿Hay algún código que pueda agregar a cada una de mis páginas (o solo a la página maestra?) Para lograr esto o estoy atrapado usando <asp:ContentPlaceHolder> ''s?
El uso o no uso de ContentPlaceHolder no afectará a qué elemento tiene el id = "actual" establecido en él.
Tendrá que mirar algún método, ya sea en su código detrás de la página maestra, en una función de JavaScript u otra cosa cuando renderiza el componente del menú para agregar correctamente el id = "actual" a la lista cuando se crea.
Es una mejor coincidencia semántica y probablemente una variable más fácil de configurar para mantener la navegación con las mismas clases o ID en todas partes y solo alterar la identificación del elemento del cuerpo para que coincida:
<li id="homeNav">home</li>
<li id="blogNav">blog</li>
y luego en cada página ...
<body id="home">
<body id="blog">
Y en el CSS:
#home #homeNav {background-image:url(homeNav-on.jpg);}
#blog #blogNav {background-image:url(blogNav-on.jpg);}
Yo usaría javascript para lograr esto. En css, cambie su #current para que sea una clase (.corrent) y luego tenga identificadores en cada uno de sus ListItems que cree. Luego, usando RegisterStartupScript, llame a un método de JavaScript que obtenga el ListItem apropiado y le asigna un estilo de actual. Usando Prototype, esto se vería como $ (''MyPageLi''). ClassName = ''current''.
¿Ha considerado usar un archivo web.sitemap? Lo hace realmente fácil. Si su archivo de mapa del sitio tiene este aspecto ...
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode>
<siteMapNode url="~/Default.aspx" title="Home" description="" />
<siteMapNode url="~/Blog.aspx" title="Blog" description="" />
<siteMapNode url="~/AboutUs.aspx" title="AboutUs" description="" />
</siteMapNode>
</siteMap>
... entonces puede hacer esto en su página maestra para lograr los resultados que desea:
<asp:SiteMapDataSource ID="sitemapdata" runat="server" ShowStartingNode="false" />
<ul id="navigation">
<asp:Repeater runat="server" ID="navrepeater" DataSourceID="sitemapdata">
<ItemTemplate>
<li class="<%# SiteMap.CurrentNode.Equals(Container.DataItem) ? "activenav" : "inactivenav" %>"><a href="<%# DataBinder.Eval(Container.DataItem, "url") %>"><%# DataBinder.Eval(Container.DataItem, "title") %></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
El LI de la página actual tendrá una clase de "activenav" (o lo que decida usar), y los demás tendrán una clase de "inactivenav". Puede escribir su CSS en consecuencia. Esta es la técnica que uso en mi sitio y funciona muy bien.
¿Qué le parece crear una propiedad de cadena protegida en su clase de código de página maestra? Anular OnLoad:
protected string _bodyId;
protected override void OnLoad(EventArgs e)
{
_bodyId = "your css id name";
}
Luego en tu página maestra aspx:
<body id="<%= _bodyId %>">
Entonces no tiene que meterse con su CSS, especialmente útil si el CSS proviene de una agencia de diseño.
Así es como lo hemos logrado usando JQuery al agregar la clase css para cambiar el fondo.
$("ul.nav > li > a:contains(''<%= SiteMap.CurrentNode.ParentNode.Title %>'')").addClass("navselected");
El " .nav " en ul.nav (en Jquery) es la clase css aplicada a la etiqueta UL.
:contains ayuda a verificar el contenido de todas las etiquetas / elementos "a" dentro de la ul-> li-> a con el título ParentNode que se imprime en el menú ...
Si se encuentra, aplica la clase css llamada navselected a la etiqueta / elemento específica ul-> li-> a.
Saludos, Minesh Shah
Systems Plus Pvt. Limitado.
www.systems-plus.com