All geek questions in one place

Change the navigation sprite on the entire navigation background, and not just on one link

Html / css sprite nav works fine for me. When each link in the unordered list hangs, the background image of the sprite changes as expected for this particular element

. I want to make the move position of the entire navigation sprite based on the fact that the linked one freezes, so that the effect for any one link changes the background for the entire unordered list.

Reason: the edges of each embedded

are not vertical, they have an angle of 45 degrees, so changing the traditional background of the background does not work so well. Changing the whole background will be perfect.

Used code:

CSS

#nav {
    position: relative;
    float: right;
    background: url('../gfx/nav.gif');
    width: 498px;
    height: 23px;
    margin: 110px 2px 0 0;
    border: 0;
    padding: 0;
}

#nav li {
    position: absolute;
    top: 0;
    margin: 0;
    border: 0;
    padding: 0;
    list-style: none;
}

#nav li, #nav a {
    height: 23px;
    display: block;
}

#nav span {
    display: none;
}

#n1 {
    left: 0;
    width: 73px;
}

#n2 {
    left: 74px;
    width: 94px;
}

#n3 {
    left: 167px;
    width: 124px;
}

#n4 {
    left: 292px;
    width: 82px;
}

#n5 {
    left: 375px;
    width: 125px;
}

#n1 a:hover {
    background: transparent url('../gfx/nav.gif') 0 -23px no-repeat;
}

#n2 a:hover {
    background: transparent url('../gfx/nav.gif') -74px -46px no-repeat;
}

#n3 a:hover {
    background: transparent url('../gfx/nav.gif') -167px -69px no-repeat;
}

#n4 a:hover {
    background: transparent url('../gfx/nav.gif') -292px -92px no-repeat;
}

#n5 a:hover {
    background: transparent url('../gfx/nav.gif') -375px -115px no-repeat;
}

And HTML:

<ul id="nav">
 <li id="n1"><a href="./"><span>Home</span></a></li>
 <li id="n2"><a href="./?c=about"><span>About</span></a></li>
 <li id="n3"><a href="./?c=programmes"><span>Programmes</span></a></li>
 <li id="n4"><a href="./?c=grants"><span>Grants</span></a></li>
 <li id="n5"><a href="./?c=publications"><span>Publications</span></a></li>
</ul>

, , , ? , JS .

.:)

PS - ​​ jsfiddle - http://jsfiddle.net/NhL7E/

, , UL, LI.

Shive, Jcubed Barry Dowd. , . - - HTML/CSS , , .

, , . , , . , . - HTTP- jQuery, JS/jQuery... ..

- , jsfiddles, ... !

Cas

+4
3

:

li -4px (# n1 , # n5 ) 8px li (4px ) 4px li, -74px -70px ( 0)

CSS

#nav {
    position: relative;
    float: right;
    background: url('http://i59.tinypic.com/25tapoi.jpg');
    width: 498px;
    height: 23px;
    margin: 110px 2px 0 0;
    border: 0;
    padding: 0;
}

#nav li {
    position: absolute;
    top: 0;
    margin: 0 -4px;
    border: 0;
    padding: 0 0px;
    list-style: none;
}
#nav li#n1 { 
    margin: 0 -4px 0 0; 
}

#nav li, #nav a {
    height: 23px;
    display: block;
}

#nav span {
    display: none;
}

#n1 {
    left: 0;
    width: 77px;
}
#n2 {
    left: 74px;
    width: 102px;
}

#n3 {
    left: 167px;
    width: 132px;
}

#n4 {
    left: 292px;
    width: 90px;
}

#n5 {
    left: 375px;
    width: 129px;
}

#n1 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}

#n2 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -70px -46px no-repeat;
}

#n3 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -163px -69px no-repeat;
}

#n4 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -288px -92px no-repeat;
}

#n5 a:hover {
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') -371px -115px no-repeat;
}

JSFiddle http://jsfiddle.net/NhL7E/12/

+3

2 :

-, , . http://i60.tinypic.com/sq3xjn.png

, , , .

#nav {
    position: relative;
    float: right;
    /*background: url('http://i59.tinypic.com/25tapoi.jpg');*/
    width: 498px;
    height: 23px;
    margin: 110px 2px 0 0;
    border: 0;
    padding: 0;
}

#nav li {
    position: absolute;
    top: 0;
    margin: 0;
    border: 0;
    padding: 0;
    list-style: none;
}

#nav li, #nav a {
    height: 23px;
    display: block;
}

#nav span {
    display: none;
}

#n1 {
    left: 0;
    width: 73px;
}
#n2 {
    left: 71px;
    width: 94px;
}

#n3 {
    left: 167px;
    width: 124px;
}

#n4 {
    left: 292px;
    width: 82px;
}

#n5 {
    left: 375px;
    width: 125px;
}



#n1 a{
    width:77px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) 0 0 no-repeat;
}

#n1 a:hover{
    background-position:0 -23px;
}

#n2 a{
    width:102px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -77px 0 no-repeat;
}

#n2 a:hover{
    background-position:-77px -23px;
}

#n3 a{
    width:131px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -179px 0 no-repeat;
}

#n3 a:hover{
    background-position:-179px -23px;
}

#n4 a{
    width:89px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -310px 0 no-repeat;
}

#n4 a:hover{
    background-position:-310px -23px;
}

#n5 a{
    width:128px;
    background: transparent url(http://i60.tinypic.com/sq3xjn.png) -399px 0 no-repeat;
}

#n5 a:hover{
    background-position:-399px -23px;
}

http://jsfiddle.net/gh6Aq/

li , , , .

:

<ul id="nav">
    <li id="n1"><a href="./"><span>Home</span></a>

        <li id="n2"><a href="./?c=about"><span>About</span></a>

            <li id="n3"><a href="./?c=programmes"><span>Programmes</span></a>

                <li id="n4"><a href="./?c=grants"><span>Grants</span></a>

                    <li id="n5"><a href="./?c=publications"><span>Publications</span></a>
                        <div class='backgroundElement'></div>
                    </li>
                </li>
            </li>
        </li>
    </li>
</ul>

:

#n1:hover .backgroundElement{
    background: transparent url('http://i59.tinypic.com/25tapoi.jpg') 0 -23px no-repeat;
}

, .

+2

, jQuery (JavaScript), , ul, ul>li>a, CSS CSS- (baclground ul).

, jQuery, . , jQuery .

$('#nav >li>a').on('mouseenter', function() {
    var id = $(this).parent().attr('id');
    switch (id) {
        case 'n1':
            $(this).parent().parent().css({
                'background-position': '0 -23px'
            });
            break;
        case 'n2':
            $(this).parent().parent().css({
                'background-position': '-0 -46px'
            });
            break;
        case 'n3':
            $(this).parent().parent().css({
                'background-position': '0 -69px'
            });
            break;
        case 'n4':
            $(this).parent().parent().css({
                'background-position': '0 -92px'
            });
            break;
        case 'n5':
            $(this).parent().parent().css({
                'background-position': '0 -115px'
            });
            break;
    }
}).on('mouseout', function() {
    $(this).parent().parent().css({
        'background-position': '0 0'
    });
});

, , 5 , , - , .

ul.

You also won't need extra code for :hoverin CSS, so the CSS code will be something like this.

#nav {
    position: relative;
    float: right;
    background: url('http://i59.tinypic.com/25tapoi.jpg');
    width: 498px;
    height: 23px;
    margin: 110px 2px 0 0;
    border: 0;
    padding: 0;
}
#nav li {
    position: absolute;
    top: 0;
    margin: 0;
    border: 0;
    padding: 0;
    list-style: none;
}
#nav li, #nav a {
    height: 23px;
    display: block;
}
#nav span {
    display: none;
}
#n1 {
    left: 0;
    width: 73px;
}
#n2 {
    left: 74px;
    width: 94px;
}
#n3 {
    left: 167px;
    width: 124px;
}
#n4 {
    left: 292px;
    width: 82px;
}
#n5 {
    left: 375px;
    width: 125px;
}

JSFiddle example

+1
source

Source: https://habr.com/ru/post/1548457/

More articles:


All Articles