entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Franja de color al final de un menú con css

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ú..

4 Respuestas

2votos

Leonardo-Tadei Puntos227020

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! ;-)

0voto

jabixo comentado

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

0voto

Peter comentado

Si es la solución, por favor márcala como correcta. :)

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

2votos

mrczrt Puntos6920

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.

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;

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

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta