Hvordan lage en Side Bar i HTML
Når du oppretter et nettsted, du vanligvis har et par alternativer for plassering av en navigasjonsmeny. I noen tilfeller er denne menyen ligger på toppen av siden, og noen ganger er det inkludert som en sidebar som går loddrett ned på siden av en side. Når du gjør en sidebar i HTML, må du sette inn sidepanelet som to seksjoner i HTML-siden. En del er CSS-koden som gjør sidepanelet funksjonelle og den andre er HTML som gir sidepanelet sin struktur.
Bruksanvisning
1 Logg inn på din webserver og åpne HTML-siden som du ønsker å gjøre en sidebar.
2 Klikk på skjermen i mellom <body> og </ body> -kodene og sette inn følgende kode:
<Div id = "navigasjon">
<H2> Innhold </ h2>
<Ul>
<Li> <a href="Introduction</a> & lt; / li "> http://www.webpage1.com"> Introduction & lt; / a> & lt; / li>
<Li> <a href="Blog</a> & lt; / li "> http://www.webpage2.com"> Blogg & lt; / a> & lt; / li>
<Li> <a href="About"> http://www.webpage3.com "> Om oss </a> </ li>
<Li> <a href="News</a> & lt; / li "> http://www.webpage4.com"> News & lt; / a> & lt; / li>
<Li> <a href="Contact"> http://www.webpage5.com "> Kontakt oss </a> </ li>
</ Ul>
</ Div>
3 Erstatt eksempel webadresser og teksten som vises på hver kobling med URL-adresser og tekst som du vil bruke på siden.
4 Klikk like etter <head> tag øverst på siden og sett inn følgende kode:
<Title> </ title>
<Style type = "css">
navigasjon {
width: 150px;
background-color: # 000FFF;
color: #FFFFFF;
float: left;
margin-left: 7px;
margin-right: 6PX;
}
navigasjons h2, #navigation hr {
display: block
padding: 10px 5px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: # 000FFF;
}
navigasjon ul {
margin: 0px;
padding: 0px;
list-style: none;
}
navigasjon ul li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: # 000FFF;
}
navigasjon ul li a {
padding: 8px;
display: block;
background-color: # 000FFF;
color: #FFFFFF;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: # 000FFF;
}
navigasjon ul li a: hover {
background-color: # 6495ED;
}
</ Style>
5 Bytt fargekoder hvis du ønsker å tilpasse siden (se Ressurser).
6 Publiser siden.