CSS - CSS dinamico en patron MVC

Pos: 102

Val: 7

CSS dinamico en patron MVC

Publicado por Pablo (3 intervenciones) el 13/05/2018 23:26:03

Saludos.

Tengo un barra de navegación horizontal construida con la etiqueta <ul> y la cual tiene cinco elementos <li> en su interior.

como esta barra se repite en todas las páginas del sitio web, decidi tomar esa parte del código y llevarmelo a un archivo aparte, y donde necesito la barra de navegación simplemente la introdusco con un include().

Hasta aqui todo bien.

antes, cuando el código de la barra de navegación se encontraba en cada pagina del sitio web, yo le cambiaba el color al elemento <li> según la página en la que me encontrará, esto lo hacia artesanalmente, en cada página asignaba una clase al elemento que cambiaba de color.

pero ahora que el código de la barra de navegación se encuentra en un unico archivo que es introducido en cada página por medio de un include() como puedo cambiar el color del elemento <li> que corresponda a la página que lo necesite.

Tendria que comunicarle al archivo donde esta el código de la barra para que página va para que le asigne color al elemento apropiado.

¿Como carrizo se hace eso?

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 7

Val: 165

CSS dinamico en patron MVC

Publicado por juan jose (57 intervenciones) el 14/05/2018 02:35:31

en un archivo css

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

-1

Comentar

Pos: 2

Val: 624

CSS dinamico en patron MVC

Publicado por xve (490 intervenciones) el 14/05/2018 07:43:03

Hola Pablo, puedes hacerlo con estilo como comenta Juan Jose... Una manera, es basándote en algún elemento del DOM diferenciador de cada pagina que incluye tu menú... algo así:

<!DOCTYPE html>

<html lang="en">

<head>

    <style>

    #pagina1>ul>li:nth-child(1) {background-color:Red;}

    #pagina2>ul>li:nth-child(2) {background-color:Red;}

    #pagina3>ul>li:nth-child(3) {background-color:Red;}

    </style>

</head>

<body id="pagina1">

<ul>

    <li>a</li>

    <li>b</li>

    <li>c</li>

</ul>

</body>

</html>

En este código que te he puesto de ejemplo, dependiendo del id del body, modificar la opción seleccionada de la lista.

Te sirve?

Valora esta respuesta

Comentar

Pos: 102

Val: 7

CSS dinamico en patron MVC

Publicado por Pablo (3 intervenciones) el 14/05/2018 13:29:09

Voy a analizar eso que me enviaste a ver como va, Luego te explco como me fue.

Gracias

Valora esta respuesta

Comentar

Pos: 7

Val: 165

CSS dinamico en patron MVC

Publicado por juan jose (57 intervenciones) el 14/05/2018 21:08:39

cuando entro aqui es para ayudar, y sinceramente me sabe muy mal que la gente ponga un negativo, por que diga lo que es, es solo css, y que te vote negativamente alguien que no tiene ni idea de lo que se habla pues... al final lo que van a conseguir es que ayude por privado. o sencillamente no ayudar.

vuelvo a repetir es solo cuestion de css. las hojas en cascada funcionan de una forma muy simple, si tu tienes un style h1 color bluel, el texto sera azul, pero si despues mas tarde pones un style h1 color red, pues sera rojo, siempre prevalece el ultimo valor dentro de un mismo objeto, en este caso el h1

archivo a incluir "menu.php"

802

<html>

    <nav class="nav1">

        <ul>

            <li><a href="#">Nosotros</a></li>

            <li><a href="#">Productos</a></li>

            <li><a href="#">Tienda</a></li>

            <li><a href="#">Blog</a></li>

            <li><a href="#">Contato</a></li>

        </ul>

    </nav>

</html>

index.php con hoja de estilo css e include

20D

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="css/estilo.css" />

</head>

<body>

        <header>

            <?php include("includes/menu.php"); ?>

        </header>

</body>

</html>

segunda pagina php con hoja de estilo css, estilo posterior e include

8E5

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" media="screen" href="css/estilo.css" /> <!-- hoja de estilo base-->

    <style>                                                                                                               <!-- modifiacion de estilo-->

        .nav1 ul li{

            background:red;

    </style>

</head>

<body>

        <header>

            <?php include("includes/menu.php"); ?>

        </header>

</body>

</html>

PD. los archivos de php deben de ser vistos desde servidor o servidor local, yo lo hice con xampp

include.zip(1,9 KB)

Valora esta respuesta

Comentar

Pos: 102

Val: 7

CSS dinamico en patron MVC

Publicado por Pablo (3 intervenciones) el 14/05/2018 21:18:41

Bro.

Tu comentario anterior fue extremadamente fuera de orden, claro, cada quien y su modo de pensar.

Gracias por este aporte, en la noche reviso lo que me enviaste a ver y como me va.

Valora esta respuesta

Comentar

Pos: 2

Val: 624

CSS dinamico en patron MVC

Publicado por xve (490 intervenciones) el 15/05/2018 08:10:55

Excelente aporte Juan Jose!!!

Quiero pensar que te han valorado negativamente la anterior respuesta, porque simplemente has dicho en el foro de CSS que hay que utilizar un archivo CSS... entiendo que esa respuesta no ayuda mucho.

Repito, este aporte es excelente como todos los que he visto tuyos!!

Valora esta respuesta

Comentar

Pos: 7

Val: 165

CSS dinamico en patron MVC

Publicado por juan jose (57 intervenciones) el 15/05/2018 22:15:57

puse un archivo css, por que el ya lo hacia con class y style en cada pagina, con lo cual se solucionaba con archivo css en comun, que a lo mejor fuese un poco escueto si, pero es que es solo eso, desde mi punto de vista.

Valora esta respuesta

Comentar

ayuda con css en bootstrap

No funciona el archivo css en mi pagina