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

How to make it so that you can go to the page where ever you click on the circle? – Html

I built this navbar with two links. The links only go to the page when I click on the text. But when I click anywhere else on the circle, it doesn’t go to another HTML page. What I want is that when you click on the text it will go to the link, but it will also go to the link whenever I click anywhere else. You can see for yourself by clicking on the text and then anywhere else on the circle but the text.

@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300&display=swap");

body {
  height: 100vh;
  background: rgb(221, 221, 221);
  font-family: "Barlow Semi Condensed", sans-serif;
  background-color: rgb(0, 0, 0);
  background-image: radial-gradient(at 16% 92%, rgb(8, 145, 178) 0, transparent 55%), radial-gradient(at 49% 99%, rgb(220, 38, 38) 0, transparent 21%), radial-gradient(at 31% 2%, rgb(219, 39, 119) 0, transparent 65%);

}

nav {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  justify-content: center;
}

ul {
  display: flex;
  justify-content: space-evenly;
}

li {
  list-style: none;
  width: 10em;
  height: 10em;
  border-radius: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.special2 {
  border: 5px solid white;
  margin: 10px;
  transition: 0.5s;
}

.special2:hover {
  transform: translateY(-10px);
}

.special {
  width: 15em;
  background: none;
  border: none;
  color: white;
  border-radius: 5px;
}

#organ {
  background-image: url(/images/cells.avif);
  background-size: cover;
}

#micro {
  background-image: url(/images/micro.jpg);
  background-size: cover;
  background-position: bottom;
}

label {
  font-size: 50px;
}

a {
  text-decoration: none;
  color: white;
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Barlow Semi Condensed", sans-serif;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>BioSite | Navigation</title>
  </head>
  <body>
    <nav>
      <ul>
        <li class="special"><label>BIOSITE</label></li>
        <li class="special2" id="organ"><a href="/pages/organ.html">ORGAN SYSTEMS</a></li>
        <li class="special2" id="micro"><a href="/pages/micro.html">MICROORGANISMS</a></li>
      </ul>
    </nav>
  </body>
</html>
Tags:

3

Answers


  1. 0

    Add this to your a element styles:

    a {
  text-decoration: none;
  color: white;
  /* Add this */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
    Login or Signup to reply.
  2. 0

    //add a div in your code and javascript

     <nav>
      **<div class "circle">**
      <ul>
        <li class="special"><label>BIOSITE</label></li>
        <li class="special2" id="organ">
        <a href="/pages/organ.html">ORGANSYSTEMS</a></li>
        <li class="special2" id="micro">
        <a href="/pages/micro.html">MICROORGANISMS</a></li>
      </ul>
      </div>
    </nav>


  <script>
    const circleLink = document.querySelector('.circle');
    circleLink.addEventListener('click', function(event) {
    if (event.target.tagName === 'A') {
    return; // allow the link to be clicked as usual
    }
    const link = circleLink.querySelector('a');
    window.location.href = link.href;
    });
 </script>
    Login or Signup to reply.
  3. 0

    You need the a to fill the entire space of the li. This can be done with a combination of position: relative; and position: absolute; like so:

    .special2 {
  /* ... */

  position: relative;
}

.special2 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}


    @import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300&display=swap");
body {
  height: 100vh;
  background: rgb(221, 221, 221);
  font-family: "Barlow Semi Condensed", sans-serif;
  background-color: rgb(0, 0, 0);
  background-image: radial-gradient(at 16% 92%, rgb(8, 145, 178) 0, transparent 55%), radial-gradient(at 49% 99%, rgb(220, 38, 38) 0, transparent 21%), radial-gradient(at 31% 2%, rgb(219, 39, 119) 0, transparent 65%);
}

nav {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  justify-content: center;
}

ul {
  display: flex;
  justify-content: space-evenly;
}

li {
  list-style: none;
  width: 10em;
  height: 10em;
  border-radius: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.special2 {
  border: 5px solid white;
  margin: 10px;
  transition: 0.5s;
  position: relative;
}

.special2 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.special2:hover {
  transform: translateY(-10px);
}

.special {
  width: 15em;
  background: none;
  border: none;
  color: white;
  border-radius: 5px;
}

#organ {
  background-image: url(/images/cells.avif);
  background-size: cover;
}

#micro {
  background-image: url(/images/micro.jpg);
  background-size: cover;
  background-position: bottom;
}

label {
  font-size: 50px;
}

a {
  text-decoration: none;
  color: white;
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Barlow Semi Condensed", sans-serif;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/style.css" />
  <title>BioSite | Navigation</title>
</head>

<body>
  <nav>
    <ul>
      <li class="special"><label>BIOSITE</label></li>
      <li class="special2" id="organ"><a href="/pages/organ.html">ORGAN SYSTEMS</a></li>
      <li class="special2" id="micro"><a href="/pages/micro.html">MICROORGANISMS</a></li>
    </ul>
  </nav>
</body>

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

Back To Top
Search