Domanda

Quindi, ho costruito questa barra di navigazione finora e io sono curioso di sapere se è ancora possibile realizzare quello che sto pensando. Attualmente, quando si passa sopra ciascuno dei collegamenti che scendono (imbottitura è aumentato).

Ora, quello che sto facendo è curioso, se si passa sopra dice "test1", test2-4 cadere anche con esso, ma nel riempimento che è stato creato dal menu a tendina, "test1" informazione si presenta. Permettendo all'utente di fare clic o leggere tutte le informazioni è in là. Inoltre, se l'utente desidera, si può spostare il loro mouse per test2 e tutto sarebbe animare (opacità, questo posso fare credo) a tutto ciò che è nel campo test2, test3 fare lo stesso, e così via.

Non ho avuto molto successo con questo, ho creato un pannello completamente separato prima, ma che non ha esattamente lavorare o non stavo farlo correttamente.

Ecco quello che ho lavorato su, tutto l'aiuto sarebbe apprezzato! Grazie! 

<!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>
È stato utile?

Soluzione

Ho sbagliato in giro con il codice di alcuni, ma non ho avuto una risposta completa, ma pensato che avrei postare quello che ho in ogni caso. Questo codice aggiungerà un div sopra il menu, e l'uso che per visualizzare il contenuto specifico <a>. Ho aggiunto ids ai tag <a> come ci si bisogno di qualche modo per identificarli nel determinare quali sono i contenuti da visualizzare. Non credo davvero dovrebbe mettere un cartellino div in un ul, quindi questo non è perfetto. 

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

Poi ho pensato che volevi dire che volevi il tuo link contenuto specifico di presentarsi direttamente sopra il vostro link quando si passa, e si avvicinò con qualcosa di diverso. È possibile utilizzare anteporre per aggiungere il contenuto specifico per l'area 'padding'. Con questa soluzione non è necessario gli ID nei tag a, ma l'intero menu non scende giù al passaggio del mouse (ma potrebbe in qualche modo, mi sono di tipo bloccato lì e potrebbe tornare in un secondo momento). Per vederla basta cambiare il codice jQuery per questo: 

$(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();
    }); 

});

Spero che questo fornisce un aiuto. Buona fortuna!

Modifica: Certo, html metodo impostare l'innerHTML dell'elemento (s) ha restituito dal selettore. Quindi, nel primo esempio, la variabile content può contenere qualunque tag a che si desidera utilizzare come collegamenti. Ecco un esempio che mostra per creare un paio di link per i contenuti di 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() { }
);
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top