живой вопрос / помощь - PullRequest
Новая
       30

живой вопрос / помощь

1 голос
/ 29 марта 2010

Итак, я уже построил эту панель навигации, и мне любопытно, возможно ли вообще добиться того, о чем я думаю. В настоящее время при наведении курсора на каждую из ссылок они раскрываются (увеличивается заполнение).

Теперь, что мне любопытно сделать, если вы наведите курсор мыши на «test1», то test2-4 также пропадет вместе с ним, но в заполнении, которое было создано из выпадающего списка, появится информация «test1». Позволяет пользователю щелкнуть или прочитать любую информацию там. Кроме того, если пользователь захочет, он может переместить свою мышь на test2, и все будет анимировано (непрозрачность, я думаю, что это можно сделать) к тому, что находится в поле test2, test3 делает то же самое и так далее.

У меня не было большого успеха с этим, я раньше создавал совершенно отдельную панель, но это не сработало, или я делал это неправильно.

Вот над чем я работаю, ЛЮБАЯ помощь будет оценена! Спасибо! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() { 
$("#nav li > a").hover(function() {
$(this).stop().animate({paddingTop: "100px"}, 100);
}, 
function() {
$(this).stop().animate({paddingTop: "10px"}, 200);  
});
});
</script>

<style type="text/css"> 
#nav
{
position: absolute;
top: 0;
left: 60px;
padding: 0;
margin: 0;
list-style: none;
}

#nav li
{
display: inline;
}

#nav li a
{
float: left;
display: block;
color: #555;
text-decoration: none;
padding: 10px 30px;
background-color: #d1d1d1;
border-top: none;
}
</style>

</head>

<body>

<div id="wrap">

<ul id="nav">
    <li><a href="">test1</a></li>
    <li><a href="">test2</a></li>
    <li><a href="">test3</a></li>
    <li><a href="">test4</a></li>

</ul>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 30 марта 2010

Я немного поработал с твоим кодом, но не получил полного ответа, но решил, что все равно опубликую то, что у меня есть. Этот код добавит div над меню и будет использовать его для отображения содержания <a>. Я добавил идентификаторы в ваши теги <a>, так как вам потребуется какой-то способ их идентифицировать при определении того, какой контент показывать. Я не думаю, что вы действительно должны поместить тег div в ul, так что это не идеально. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript"> 
$(function() {  
    $('#content').height(0);
    $("#nav li > a").hover(function() { 
            var id = $(this)[0].id;
            var content = 'Default content';
            if (id == '1')
                content = 'Test 1 content';
            else if (id == '2')
                content = 'Test 2 content';
            else if (id == '3')
                content = 'Test 3 content';
            else if (id == '4')
                content = 'Test 4 content';

            $('#content').html(content);
        },  
        function() { }
    ); 

    $("#nav").hover(function() { 
            $('#content').stop().animate({height: "100px"}, 100);
        },  
        function() { 
            $('#content').html('').stop().animate({height: "0"}, 200);  
        }
    ); 

});

</script> 

<style type="text/css">  
#nav 
{ 
position: absolute; 
top: 0; 
left: 60px; 
padding: 0; 
margin: 0; 
list-style: none; 
} 

#nav li 
{ 
display: inline; 
} 

#nav li a 
{ 
float: left; 
display: block; 
color: #555; 
text-decoration: none; 
padding: 10px 30px; 
background-color: #d1d1d1; 
border-top: none; 
} 

div#content
{
    border: 1px solid red;
    background-color: #d1d1d1;
    width: 355px;
}
</style> 

</head> 

<body> 

<div id="wrap"> 
<ul id="nav"> 
    <div id="content"></div>
    <li><a id="1" href="">test1</a></li> 
    <li><a id="2" href="">test2</a></li> 
    <li><a id="3" href="">test3</a></li> 
    <li><a id="4" href="">test4</a></li>
</ul> 
</div> 
</body> 
</html>

Тогда я подумал, что вы хотите, чтобы контент, связанный с вашей ссылкой, отображался прямо над ссылками при наведении курсора, и что-то другое. Вы можете использовать jQuery prepend , чтобы добавить конкретный контент в область заполнения. В этом решении вам не нужны идентификаторы в тегах a, но при наведении курсора все меню не выпадает (но, может, я как-то застрял и могу вернуться к нему позже). Чтобы увидеть это, просто измените код jQuery на это: 

$(function() {  
    $("#nav li > a").hover(function() { 
        $(this).stop().animate({paddingTop: "100px"}, 100); 
        $(this).prepend('<div id="paddingMenu"><p>test1 link</p><p>test1 link2</p></div>');
    },  
    function() { 
        $(this).stop().animate({paddingTop: "10px"}, 200);
        $('#paddingMenu').remove();
    }); 

});

Надеюсь, это поможет. Удачи!

Редактировать: Конечно, метод jQuery html установит innerHTML элемента (ов), возвращаемых из его селектора. Таким образом, в первом примере переменная content может содержать любые теги a, которые вы хотите использовать в качестве ссылок. Вот пример, показывающий, как создать пару ссылок для содержимого test1: 

$("#nav li > a").hover(function() { 
        var id = $(this)[0].id;
        var content = 'Default content';
        if (id == '1')
            content = '<a href="http://google.com">Google<a><br />' +
              '<a href="http://stackoverflow.com/">Stackoverflow</a>';
        else if (id == '2')
            content = 'Test 2 content';
        else if (id == '3')
            content = 'Test 3 content';
        else if (id == '4')
            content = 'Test 4 content';

        $('#content').html(content);
    },  
    function() { }
);
...