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

disable li items in navigation bar HTML

I have a simple navigation bar, this is the HTML

<body>
  <header>
    <nav class="menubar">
      <ul class="menulist">
        <li id="login" class="login"><a href="login.html">Login</a></li>
        <li id="settings" class="settings"><a href="settings.html">Settings</a></li>
        <li id="conf" class="conf"><a href="conf.html">Configuration</a></li>
        <li id="about" class="about"><a href="about.html">About</a></li>
      </ul>
    </nav>

  </header>
</body>

ul li {
    list-style: none;
    display: inline-block;
    float: left;
    line-height: 50px;
  }

  ul li a{
    display: block;
    text-decoration: none;
    font-size: 14;
    font-style: arial;
    color: #1e1e1e;
    padding: 0 20px;
  }

I would like to disable the menu items, except for the login, until the user actually login in the page.
I saw a lot of example online but nothing really working.
Could you please give me an example? I’m new to HTML and trying to learn.

Thanks in advence for your time

I’ve tried to use classes, as you can see, but not clear how to use them in JS

Tags:

2

Answers


  1. 0

    I don’t know what language you use to make the login, but hope this help! I’ve also add some explanation in the code

    ul li {
  list-style: none;
  display: inline-block;
  float: left;
  line-height: 50px;
  display: none; /*add this to hide all the menu*/
}

ul li a {
  display: block;
  text-decoration: none;
  font-size: 14;
  font-style: arial;
  color: #1e1e1e;
  padding: 0 20px;
}

/*add these*/
ul li.login {
  display: block;
}

/*add these to make an exception*/
ul.logged li {
  display: inline-block;
}
/*you need to add class 'logged' to 'ul' element after the user logged in, then all the menu will showing*/
    <nav class="menubar">
  <ul class="menulist">
    <li id="login" class="login"><a href="login.html">Login</a></li>
    <li id="settings" class="settings"><a href="settings.html">Settings</a></li>
    <li id="conf" class="conf"><a href="conf.html">Configuration</a></li>
    <li id="about" class="about"><a href="about.html">About</a></li>
  </ul>
</nav>
    Login or Signup to reply.
  2. 0

    After login, add the ‘logged‘ class to the <ul> element

    ul li {
  list-style: none;
  display: none;
  float: left;
  line-height: 50px;
}

ul li a {
  display: block;
  text-decoration: none;
  font-size: 14;
  font-style: arial;
  color: #1e1e1e;
  padding: 0 20px;
}
ul li.login {
  display: block;
}

/* After login */
ul.logged li.login {
  display: none;
}
ul.logged li:not(.login) {
  display: inline-block;
}
    <body>
  <header>
    <nav class="menubar">
      <ul class="menulist"> <!-- After login, add the 'logged' class to the <ul> element -->

        <li id="login" class="login"><a href="login.html">Login</a></li>
        <li id="settings" class="settings"><a href="settings.html">Settings</a></li>
        <li id="conf" class="conf"><a href="conf.html">Configuration</a></li>
        <li id="about" class="about"><a href="about.html">About</a></li>
      </ul>
    </nav>

  </header>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search