entre Desarrolladores

Question

Me gustaría saber como se hace en css para que en un menú aparezca una franja de color al final, para que me entendáis os pongo este menú de ejemplo: https://myspace.com/

No se con que propiedad hacer esa franja en el menú..

Answer 1

4 Respuestas

jabixo · Answer 2 · 2013-11-27T17:22:28+0000

Hola Javi,

la propiedad para poner la franja azul se puede hacer definiendo un borde en CSS a la derecha:

border-right-color: blue;
border-right-style: solid;
border-right-width: 7px;

podrías imitar el menú de MySpace con este código que te envío a modo de ejemplo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menú</title>
</head>
<link href="css/estilo3.4.1.css" type="text/css" rel="stylesheet">
<body>
    <nav>
        <h1>Discover </h1>
        <ul>
            <li><a href="#" class="welcome seleccionado">Welcome</a></li>
            <li><a href="#" class="featured">Featured</a></li>
            <li><a href="#" class="people">People</a></li>
            <li><a href="#" class="music">Music</a></li>
            <li><a href="#" class="mixes">Mixes </a></li>
            <li><a href="#" class="videos">Videos</a></li>
            <li><a href="#" class="radio">Radio</a></li>
        </ul>
    </nav>
</body>
</html>

y para el CSS:

/*
* @Prometeus Technology, a subsidiary of Pegasus Tech Supply
* @copyright Copyright (C)2013 Leonardo Tadei. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see gpl-3.0.txt
* CSS is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
*/
nav {
    background-color: #666; 
    font-family: Arial, sans-serif;
    color: white;
    width: 170px;
    margin: 22px;
    padding: 0px;
    float: left;
}
nav h1{
    font-size: 14px;
    padding: 6px;
}
nav ul{
    list-style: none outside none;
    margin: 0;
    padding: 0 0 0 4px;
}
nav a{
    display: block;
    color: white;;
    text-decoration: none;
    font-weight: bold;
    font-size: 11px;
    padding: 6px 26px;
    border-top: 1px solid rgb(60, 60, 60);
    border-bottom: 1px solid rgb(40, 40, 40);
    opacity: 0.5;
}
nav a:hover{
    background-color: #333;
    border-right-color: blue;
    border-right-style: solid;
    border-right-width: 7px;
    opacity: 1;
}
.seleccionado{
    color: #fff !important;
    background-color: #333;
    border-right-color: blue;
    border-right-style: solid;
    border-right-width: 7px;
    opacity: 1;
}
.welcome{
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA1ElEQVR42p2RMQrCQBBFA4JVKitBEGwDghAQrKxsU6UVbNNaWdl6Aw/gDYRU3kCwshJSCYJgGwgIwvjBDw4LsyH58Fh2Z/axwwYiYjElgQ9fMZFfdm0FkfyTtRGESlCCfhPBgmupJJsmghMYg6cS3Fjr1gkG4A1SRyCULusEezZvKRJnjAPoWYJQzf0Bbo4cL7EEmfjzAgVYW4LcuFiCSo9iCR6GIAeF2q8sQWUIUnBX+8gSXMQJzzoc4wrOvm+c61eweUTBhF88MwVkSFHMi7oWu/1f5plX8UUWYPkAAAAASUVORK5CYII=");
}
.featured{
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIklEQVQ4y2P4//8/AyWYYVAZQCqgnwtGA3HYuWCQRyNZGABHxS/7OP4PhAAAAABJRU5ErkJggg==");
}
.people{
    background-position: left top;
    background-repeat: no-repeat;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAy0lEQVR42r3TMQcCYRzH8eOmiDgi7h00td4UR+/giJuiKZpaoymOiKa46V5A9DKamiKOiIim42g6jqfvEP097p6G6MtneYbf8DweSyn1k78MtJAgR4rANDBAjDXasBBDVqJXNeBDdoaNC/SmVQMb6HWxg55fNTCCLEMTLo7vswLzujuwEeGGA/qwBBf2t1dwEMATZx72yJBiiUbVwAKl+jRGiAJ6JzhyYAbZHR08UddWDlwhSzCEqYcc0IswgTE5kEO2QghT2b8+k9kL4fpjkSwZWzYAAAAASUVORK5CYII=");
}
.music{
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAjElEQVR42t3TsQmAMBBAUcEBBMEZbB3AygGcwUoQnMExrBzAMQQ3cICAINjaCkL8hUUIKY5o5cFrjuM3IYHW+hXJUYwSNXpMkkCKDjPsOQQBYz4ObBAHNoxokD37SBywd/8IFKh8A4PkGXMsWB2B0wgoVyDEbhxdVqB9wgoFnAFlBEafz5SgQunxG/3dw4E36s7hd20AAAAASUVORK5CYII=");
}
.mixes{
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYUlEQVR42sXTwQkAIAxD0WwmdP9VOkP17MeIKCgUvORJS1VVXdVD4PCsgBzVzIttVDoggDAcDhAQhmWBCYnpri0ABGEPsGe24wH2zJl4gAMTEANwYETCAAivkHq2yv9/Ywd23EOizeJ1VgAAAABJRU5ErkJggg==");
}
.videos{
    background-position: left top;
    background-repeat: no-repeat;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVR42t2TMQqAMAxFBY/RqWuPJHgnJ+8hFLxNoWcoZI1/EMzQEkMW8cObGl5Jmk7M7OI7ggAO0FhPu2uDFGSQDDcnkKWg9AoVaZGCOigisAzOqi54soHZI9itAtnC+qIF/xAziIZnjODsLRKxHpKL9IPPdAHjkSooxdeLnAAAAABJRU5ErkJggg==");
}
.radio{
    background-position: left top;
    background-repeat: no-repeat;
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA+ElEQVR42r2SwQYCURiFhxhazartrKLV0KpVbxBDbxCzmlUPMA8Q0SoiomeI3mBo1apV2xgiIlpF3E75LtfdzCL185k7/zn/uXfcCYwxX+G+RKJRN4An8gNCUYpFXQCenQjdgFw8RCIGVvQI0RK8uRtwEGvEp8jot0WHdYaWiJU42ICWeFcq5qJit5GwNaZX4Unpt94BXWF4bsWGHUtD2d3Qtu4Mx/xUn8/YY544AUt6ezx9+m17LVdRiCHCkP5Z3EXoaQUzjYDkqbiIiGuK6Z/EjXWMFuGdubfQFEd7VPACQB68miEAeuxSFxDj9X5lqA2APwXATwNe1Wc9ii9fhiUAAAAASUVORK5CYII=");
}

Podría ser más eleganet, pero funciona ;-)

Suerte compañero! ;-)

Gracias Leonardo! no podría ser más completa la respuesta :D

Answer 3 · 2013-11-27T16:46:42+0000

0voto

christian_avalos Puntos1370

Te refieres a esa raya azul debajo de Discover?
Si es asi, intenta con la propiedad border-bottom-color:#008DDE;
Ahi esta azulita todavia xd

respondido por christian_avalos (1.370 puntos) Nov 27, 2013

Answer 4 · 2013-11-28T16:02:59+0000

2votos

mrczrt Puntos6940

Hola, puedes usar CSS:

Para todos los elementos puedes establecer que el tamaño sea el mismo sin importar el borde :box-sizing:border-box;.

Y para el elemento seleccionado : border-right:5px solid blue;

Saludos.

respondido por mrczrt (6.940 puntos) Nov 28, 2013

Peter · Answer 5 · 2013-11-28T18:36:16+0000

2votos

Ezekiel1349 Puntos350

ahi en Myspace es un :after del elemento de la lista

a:after {
content: '';
position: absolute;
width: 4px;
height: 26px;
top: 0;
right: 0;
background: #018CDD;
}

pero lo puedes lograr tambien asi

border: 4px solid #018CDD;

respondido por Ezekiel1349 (350 puntos) Nov 28, 2013

editado por Peter Nov 29, 2013

Pregunta

Franja de color al final de un menú con css

Por favor, accede o regístrate para añadir un comentario.

4 Respuestas

jabixo comentado Nov 28, 2013

Peter comentado Nov 28, 2013

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para responder a esta pregunta.

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta