Vertical Navigation Bar ng CSS

Vertical navigation bar

Upang makabuo ng vertical navigation bar, maliban sa code sa nakaraang kabanata, maaari rin naming itakda ang estilo ng <a> na elemento sa listahan:

Example

li a {
  display: block;
  width: 60px;
{}

Try It Yourself

Paliwanag ng Halimbawa:

  • display: block; - Ang pagpapakita ng link bilang block element ay nagiging posible upang ang buong lugar ng link na puwedeng iklik (hindi lamang ang teksto), at maaari naming itakda ang lapad (kung kailangan, maaari rin naming itakda ang padding, margin, height, at iba pa).
  • width: 60px; - Sa kalaunan, ang mga block element ay magdadala ng buong lapad na magagamit. Kailangan naming itakda ang lapad na 60 pixel.

Maaari mo ring itakda ang lapad ng <ul>, at alisin ang lapad ng <a>, dahil kapag ipapakita bilang block element, sila ay magdadala ng buong lapad na magagamit. Ito ay magdudulot ng katulad na resulta sa aming nakaraang halimbawa:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60px;
{} 
li a {
  display: block;
{}

Try It Yourself

Sample ng vertical navigation bar

Lumikha ng pangunahing vertical navigation bar na may kulay ng puti at magbabago ng kulay ng background ng link kapag may mouse hover ng user:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
{}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
{}
/* Magbabago ng kulay ng link kapag may hover */
li a:hover {
  background-color: #555;
  color: white;
{}

Try It Yourself

aktibo/kasalukuyang navigation link

Magdagdag ng klase na "active" sa kasalukuyang link upang makilala ng user kung anong pahina ang nasa ito:

Example

.active {
  background-color: #4CAF50;
  color: white;
{}

Try It Yourself

link na center at magdagdag ng border

Magdagdag ng text-align:center sa <li> o <a>, upang ma- center ang link.

Magdagdag ng border Magdagdag ng katangian ng border sa <ul>, at magdagdag ng border sa palibot ng navigation bar. Kung gusto mo ring magdagdag ng border sa loob ng navigation bar, magdagdag ng border sa lahat ng <li> na elemento: border-bottom，hindi kasama ang huling elemento:

Example

ul {
  border: 1px solid #555;
{}
li {
  text-align: center;
  border-bottom: 1px solid #555;
{}
li:last-child {
  border-bottom: none;
{}

Try It Yourself

Full-height Fixed Vertical Navigation Bar

Create a full-height 'sticky' side navigation:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it sticky, even when scrolling */
  overflow: auto; /* If the sidebar content is too much, enable the scrollbar */
{}

Try It Yourself

Note:This example may not work properly on mobile devices.