Question 303932 in Html Question posted in
Some basic documentation can be found here.

Html – How to create this tab navigation with the underline with radius

im trying to create something like this google tabs menu with this bar with some radius.

enter image description here

ul {
  border-bottom: 1px solid #eee;
}

ul li {
  display: inline-block;
  text-decoration: none;
}

li {
  padding: 10px 0px;
  margin: 0 20px;
  cursor: pointer;
}

li a.active {
  position: relative;
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: #1a73e8;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
<ul>
  <li><a href="index.html" class="active">Dashboard</a></li>
  <li><a href="mytasks.htm">My tasks</a></li>
</ul>

I tried various types of combinations but failed…

Tags:

2

Answers


  1. 0
    • Use the ::after pseudo on the .active anchor
    • don’t style li elements. Treat them as semantic wrappers
    • use display: flex on the .tabs (yes, use a class for that UL parent)
    /*QuickReset*/ * { margin: 0; box-sizing: border-box; }

.tabs {
  padding: 0;
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #eee;
  list-style: none;
}

.tabs a {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 1rem 0;
  color: #888;
}

.tabs a.active {
  color: #1a73e8;
}

.tabs a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: currentColor;
  border-radius: 4px 4px 0 0;
}
    <ul class="tabs">
  <li><a href="index.html">Dashboard</a></li>
  <li><a href="mytasks.html" class="active">My tasks</a></li>
  <li><a href="settings.html">Settings</a></li>
  <li><a href="prifile.html">Profile</a></li>
</ul>
    Login or Signup to reply.
  2. 0

    I have tried to solve your problem using some CSS code changes. try it:

    ul {
  border-bottom: 1px solid #eee;
}

ul li {
  display: inline-block;
  text-decoration: none;
}

li {
  cursor: pointer;
  display: inline-block;
}
li a{
  position: relative;
  text-decoration: none;
  margin: 0 20px;
  padding: 15px 0;
  display: inline-block;
  color: #333;
}
li a.active{
  color: green;
}
li a.active::after {
  content: "";
  position: absolute;
  height: 4px;
  width: 100%;
  background: green;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
  bottom: 0;
  left: 0;
}
    <ul>
    <li><a href="index.html" class="active">Dashboard</a></li>
    <li><a href="mytasks.htm">My tasks</a></li>
  </ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search