How to place an item from a breadcrumb menu with a different color, without the hover

Navigation
1

I have a menu of this genre, but I do not want to use the status of hover . It will serve only for page information, without having to click.

However, I'm not able to put a different color in one of the menus, without using a status of hover . I've tried using a different class with a different color, and I'm not getting it.

Below my code: 

<html><head><meta http-equiv="Content-Type" content="text/html;">
        <meta charset="utf-8">

<title>breadcrumbs</title>
    <style type="text/css">

    body{
        font-family:Arial, Helvetica, sans-serif;

        }
    #crumbs ul li a {
    display: block;
    float: left;
    height: 15px;
    background: #999;
    text-align: center;
    padding: 20px 30px 0 20px;
    position: relative;
    margin: 0 10px 0 0; 
    font-size: 18px;
    text-decoration: none;
    color: #fff;
    line-height: 1px;
    cursor:default;
}

    #crumbs ul li a:after {
    content: "";  
    position: absolute; right: -17px; top: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #999; 
    z-index: 1;
}
    #crumbs ul li a:before {
    content: "";  
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #fff;
    position: absolute; left: 0; top: 0;
}

    #crumbs ul li {
    display:inline;
}

    #crumbs ul li a:hover {
    background: #779519;
}
    #crumbs ul li a:hover:after {
        border-left-color: #779519;
    }    


    #crumbs ul li:first-child a {
    border-top-left: 10px; border-bottom-left: 10px;
}
#crumbs ul li:first-child a:before {
    display: none; 
}

#crumbs ul li:last-child a {
    padding-right: 80px;
    border-top-right: 10px; border-bottom-right: 10px;
}
#crumbs ul li:last-child a:after {
    display: none; 
}

    </style></head>

<body>
    <div id="crumbs">
    <ul>
        <li><a href="#">Tipo de Bilhete / Zona</a></li>
        <li><a href="#">Sector</a></li>
        <li><a href="#">Lugar</a></li>
        <li><a href="#">Dados de Reserva</a></li>
        <li><a href="#">Confirmação</a></li>
        <li><a href="#">Pagamento</a></li>

    </ul>
</div>
</body></html>
    
asked by anonymous 28.11.2014 / 15:05

2 answers

2

Just enter a class="active" in the li that you want to highlight. In CSS it stays

#crumbs ul li.active a {...}

Your code with the change: 

<html><head><meta http-equiv="Content-Type" content="text/html;">
        <meta charset="utf-8">

<title>breadcrumbs</title>
    <style type="text/css">

    body{
        font-family:Arial, Helvetica, sans-serif;

        }
    #crumbs ul li a {
    display: block;
    float: left;
    height: 15px;
    background: #999;
    text-align: center;
    padding: 20px 30px 0 20px;
    position: relative;
    margin: 0 10px 0 0; 
    font-size: 18px;
    text-decoration: none;
    color: #fff;
    line-height: 1px;
    cursor:default;
}

    #crumbs ul li a:after {
    content: "";  
    position: absolute; right: -17px; top: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #999; 
    z-index: 1;
}
    #crumbs ul li a:before {
    content: "";  
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #fff;
    position: absolute; left: 0; top: 0;
}

    #crumbs ul li {
    display:inline;
}

    #crumbs ul li a:hover {
    background: #779519;
}
    #crumbs ul li a:hover:after {
        border-left-color: #779519;
    }    


    #crumbs ul li:first-child a {
    border-top-left: 10px; border-bottom-left: 10px;
}
#crumbs ul li:first-child a:before {
    display: none; 
}

#crumbs ul li:last-child a {
    padding-right: 80px;
    border-top-right: 10px; border-bottom-right: 10px;
}
#crumbs ul li:last-child a:after {
    display: none; 
}


#crumbs ul li.active a{
    color: #ffcc00;
    background: #000;
}

    </style></head>

<body>
    <div id="crumbs">
    <ul>
        <li><a href="#">Tipo de Bilhete / Zona</a></li>
        <li><a href="#">Sector</a></li>
        <li><a href="#">Lugar</a></li>
        <li><a href="#">Dados de Reserva</a></li>
        <li><a href="#">Confirmação</a></li>
        <li class="active"><a href="#">Pagamento</a></li>

    </ul>
</div>
</body></html>
    
28.11.2014 / 15:32
0

Hello,

So I understand you want the user to know his location without the hover. I think you've already found the solution yourself, but you have not applied.

If you are using a manager for example, the body tag always has a class with the information of the page id for example: 

<body class="page-contato"></body>

From here you can have control control of the CSS used on the page individually as well.

If you are not using any CMS, just use this same logic.

Follow the example: link

    
28.11.2014 / 15:29
Validation control ErrorMessage How to save a file in a field in SQL Server?