NAV WITH TARGET

by Bharat Soni

HTML

<nav class="nav">
    <a href="#menu1" id="menu1" class="menu1">menu1</a>
    <a href="#menu2" id="menu2" class="menu2">menu2</a>
    <a href="#menu3" id="menu3" class="menu3">menu3</a>
    <a href="#menu4" id="menu4" class="menu4">menu4</a>
    <div class="image"></div>
</nav>

CSS

.nav {

    width: 100%;
}
.nav a {
    text-align:center;
    float: left;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    background: orange;
    margin: 0 10px 10px 0;
}
.image
{
    width: 50px;
    height: 50px;
    background: url(http://placehold.it/50x50) no-repeat;
    clear: both;

    
}
.menu1:target ~ .image
{
    width: 50px;
    height: 50px;
    background: url(http://placehold.it/50x50) no-repeat;

}
.menu2:target ~ .image
{
    width: 100px;
    height: 100px;
    background: url(http://placehold.it/100x100) no-repeat;

}
.menu3:target ~ .image
{
    width: 150px;
    height: 150px;
    background: url(http://placehold.it/150x150) no-repeat;

}
.menu4:target ~ .image
{
    width: 200px;
    height: 200px;
    background: url(http://placehold.it/200x200) no-repeat;

}