HTML/CSS: Wie eine Bar, um auf der Seite, die Sie zu einem bestimmten Teil der Seite

Question

zu nehmen This is what I'm talking about

Wie würde ich so etwas wie dies so machen, wenn Sie die Punkte bewegen zeigen Ihnen, wo Sie auf die sind Seite und klicken Sie darauf, um Sie zu diesem Abschnitt zu bringen?

Verwenden Sie auch Javascript, wenn Sie möchten, dass die Seite zu einem Abschnitt blättert, anstatt nur darauf zu erscheinen?

Answer 1

Hier ist eine schnelle und schmutzige Version - es gibt wahrscheinlich bessere Möglichkeiten, Dinge zu tun, aber das funktioniert (Sie können: vor /: nach Pseudo-Klassen, wenn Sie wollen und verwenden Sie Symbole/font-awesome für die Kreise, dass So können Sie zumindest die <i> Element verlieren. Aber ich war zu faul, das zu machen.

(Diese etwas für on-page-Elemente gerecht zu werden bearbeitet wurde, statt zwischen den Seiten)

body { 
 
    background: black; 
 
    color: white; 
 
    } 
 
h2,p { 
 
    margin-left: 10em; 
 
    } 
 
#menu { 
 
    list-style-type: none; 
 
    position: fixed; 
 
    left: 1em; 
 
    top: 15%; 
 
    } 
 
#menu li {; 
 
    line-height: 1.5em; 
 
    margin: .25em 0; 
 
    } 
 
#menu li i { 
 
    display: inline-block; 
 
    width: 1.2em; 
 
    height: 1.2em; 
 
    border: 1px solid white; 
 
    border-radius: 50%; 
 
    line-height: 1.5em; 
 
    vertical-align: middle; 
 
    } 
 
#menu li span { 
 
    display: none; 
 
    } 
 
#menu li:hover span { 
 
    display: inline-block; 
 
    color: white; 
 
    padding-left: 1em; 
 
    } 
 
#menu li:hover i { 
 
    background: white; 
 
    }

<ul id="menu"> 
 
    <li><a href="#first"><i></i><span>First item</span></a></li> 
 
    <li><a href="#second"><i></i><span>Second</span></a></li> 
 
    <li><a href="#third"><i></i><span>Third item</span></a></li> 
 
    <li><a href="#fourth"><i></i><span>Fourth</span></a></li> 
 
</ul> 
 

 
<h2 id="first">First item</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In schola desinis. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Oratio me istius philosophi non offendit; Graecis hoc modicum est: Leonidas, Epaminondas, tres aliqui aut quattuor; Ea possunt paria non esse. Sed haec quidem liberius ab eo dicuntur et saepius. Si verbum sequimur, primum longius verbum praepositum quam bonum. Invidiosum nomen est, infame, suspectum. Paria sunt igitur. </p> 
 

 
<p>Apparet statim, quae sint officia, quae actiones. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Illum mallem levares, quo optimum atque humanissimum virum, Cn. </p> 
 
<h2 id="second">Second item</h2> 
 
<p>Illa tamen simplicia, vestra versuta. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Tum Quintus: Est plane, Piso, ut dicis, inquit. Erit enim mecum, si tecum erit. Primum in nostrane potestate est, quid meminerimus? Eadem nunc mea adversum te oratio est. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. </p> 
 

 
<p>Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Consequens enim est et post oritur, ut dixi. Ut proverbia non nulla veriora sint quam vestra dogmata. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Quae contraria sunt his, malane? In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. </p> 
 
<h2 id="third">Third item</h2> 
 
<p>Quo modo autem optimum, si bonum praeterea nullum est? Philosophi autem in suis lectulis plerumque moriuntur. Duarum enim vitarum nobis erunt instituta capienda. Sed haec nihil sane ad rem; Obsecro, inquit, Torquate, haec dicit Epicurus? Age nunc isti doceant, vel tu potius quis enim ista melius? </p> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In schola desinis. Quos quidem tibi studiose et diligenter tractandos magnopere censeo. Duo Reges: constructio interrete. Oratio me istius philosophi non offendit; Graecis hoc modicum est: Leonidas, Epaminondas, tres aliqui aut quattuor; Ea possunt paria non esse. Sed haec quidem liberius ab eo dicuntur et saepius. Si verbum sequimur, primum longius verbum praepositum quam bonum. Invidiosum nomen est, infame, suspectum. Paria sunt igitur. </p> 
 

 
<p>Apparet statim, quae sint officia, quae actiones. Septem autem illi non suo, sed populorum suffragio omnium nominati sunt. Huic mori optimum esse propter desperationem sapientiae, illi propter spem vivere. Illum mallem levares, quo optimum atque humanissimum virum, Cn. </p> 
 
<h2 id="fourth">Fourth item</h2> 
 
<p>Illa tamen simplicia, vestra versuta. Eorum enim omnium multa praetermittentium, dum eligant aliquid, quod sequantur, quasi curta sententia; Tum Quintus: Est plane, Piso, ut dicis, inquit. Erit enim mecum, si tecum erit. Primum in nostrane potestate est, quid meminerimus? Eadem nunc mea adversum te oratio est. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Varietates autem iniurasque fortunae facile veteres philosophorum praeceptis instituta vita superabat. </p> 
 

 
<p>Sed tamen enitar et, si minus multa mihi occurrent, non fugiam ista popularia. Consequens enim est et post oritur, ut dixi. Ut proverbia non nulla veriora sint quam vestra dogmata. Itaque eos id agere, ut a se dolores, morbos, debilitates repellant. Quae contraria sunt his, malane? In his igitur partibus duabus nihil erat, quod Zeno commutare gestiret. </p> 
 

 
<p>Quo modo autem optimum, si bonum praeterea nullum est? Philosophi autem in suis lectulis plerumque moriuntur. Duarum enim vitarum nobis erunt instituta capienda. Sed haec nihil sane ad rem; Obsecro, inquit, Torquate, haec dicit Epicurus? Age nunc isti doceant, vel tu potius quis enim ista melius? </p>

Answer 2

Wenn Sie auf Ihrer Seite von einem Ort zum anderen springen möchten, würde ich <a name="label"></a> zu dem Code hinzufügen, wo Sie anfangen, über ein anderes Thema zu sprechen. Wenn Sie dies tun, fügen Sie einfach einen Link, wo immer Sie wollen, aber es geht so <a href="#lable">link-name</a> hilft das? Es könnte Ihnen nicht helfen, was Sie wollten, aber Ihre Frage war verwirrend und nicht klar, was Sie wollten. Zumindest könnte meine Idee dir helfen, auf einer langen Seite zu navigieren, die du vielleicht hast.

J. Carter :)