CODEWITHSUNDEEP
htmlcss
Raphaellndr
Raphaellndr

Reputation: 1

How not to lose focus on an element even when I click somewhere else on my web page?

I'm trying to make a rotating menu for my web page, but when I rotate to the 2nd page (for example) and when I click somewhere else on the page, the menu returns to its initial position. So my question is : how can I click on something else and not return to the first position ?

* {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
}


/*HEADER*/

.header {
  height: 25px;
  background: #222;
  color: #eee;
  text-align: center;
  font: 10px/25px Helvetica, Verdana, sans-serif;
}

.header a {
  color: #999;
}


/*WRAPPER*/

.wrapper {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 370px;
}

.menu a {
  margin-right: -4px;
  padding: 10px 30px;
  width: 50px;
  color: #333;
  text-decoration: none;
  font: 15px/25px Helvetica, Arial, sans-serif;
}

.menu a:hover {
  background: #eee;
}


/*INNER CIRCLE*/

.wrapper:before {
  content: "CCAVV";
  text-align: center;
  font: 30px/135px Georgia, Times, serif;
  color: #efefef;
  position: absolute;
  top: 140px;
  left: 110px;
  z-index: 10;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}


/*MAIN CIRCLE*/

.circle {
  position: relative;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 25px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #093b62;
  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}


/*LITTLE CIRCLES*/

.circle li {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  list-style-type: none;
  text-align: center;
  font: 20px/50px Helvetica, Arial, sans-serif;
  top: 0;
  left: 0;
}

.circle li:nth-child(1) {
  top: 15px;
  left: 125px;
}

.circle li:nth-child(2) {
  top: 125px;
  left: 235px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.circle li:nth-child(3) {
  top: 235px;
  left: 125px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.circle li:nth-child(4) {
  top: 125px;
  left: 15px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}


/*HOVER STATES*/

.menu>.one:focus~.circle {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.menu>.two:focus~.circle {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.menu>.three:focus~.circle {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.menu>.four:focus~.circle {
  -webkit-transform: rotate(-270deg);
  -moz-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  -o-transform: rotate(-270deg);
  transform: rotate(-270deg);
}
<div class="wrapper">
  <div class="menu">
    <a href="#" class="one">One</a>
    <a href="#" class="two">Two</a>
    <a href="#" class="three">Three</a>
    <a href="#" class="four">Four</a>
    <div class="circle">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 0

Views: 264

Answers (1)

Johnny Tisdale
Johnny Tisdale

Reputation: 139

I'm not sure that you can prevent the default behavior of :focus with pure CSS. Furthermore, I'm not sure that using :focus is the best way to accomplish what you're trying to accomplish.

If you are open to using jQuery, this is quite easy to accomplish. (This could also be accomplished pretty easily with pure JavaScript if you don't want to use jQuery. Let me know if that is the case and I will edit my answer.)

Add jQuery and a JavaScript file in <head>:

<!DOCTYPE html>
<html>

<head>
  <meta charset=utf-8 />
  <meta name="description" content="description">

  <title>Rotating CSS Menu</title>

  <!-- jquery -->
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous">
  </script>
  <script src='foo.js'></script>

  <!-- load css style -->
  <link rel="stylesheet" type="text/css" media="screen"      href="style.css" />

</head>

<body>
  <div class="wrapper">
    <div class="menu">
      <a href="#" class="one">One</a>
      <a href="#" class="two">Two</a>
      <a href="#" class="three">Three</a>
      <a href="#" class="four">Four</a>
      <div class="circle">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>

Remove the /*HOVER STATES*/ section from your CSS:

* {
  margin: 0;
  padding: 0;
  -webkit-backface-visibility: hidden;
}

/*HEADER*/
  .header {
  height: 25px;
  background: #222;
  color: #eee;
  text-align: center;
  font: 10px/25px Helvetica, Verdana, sans-serif;
}

.header a {
  color: #999;
}

/*WRAPPER*/
.wrapper {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 370px;
}

.menu a {
  margin-right: -4px;
  padding: 10px 30px;
  width: 50px;
  color: #333;
  text-decoration: none;
  font: 15px/25px Helvetica, Arial, sans-serif;
}

.menu a:hover {
  background: #eee;
}

/*INNER CIRCLE*/
.wrapper:before {
  content: "CCAVV";
  text-align: center;
  font: 30px/135px Georgia, Times, serif;
  color: #efefef;
  position: absolute;
  top: 140px;
  left: 110px;
  z-index: 10;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;

  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}

/*MAIN CIRCLE*/
.circle {
  position: relative;
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 25px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #093b62;

  box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/*LITTLE CIRCLES*/
.circle li {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  list-style-type: none;
  text-align: center;
  font: 20px/50px Helvetica, Arial, sans-serif;
  top: 0;
  left: 0;
}

.circle li:nth-child(1) {
  top: 15px;
  left: 125px;
}

.circle li:nth-child(2) {
  top: 125px;
  left: 235px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.circle li:nth-child(3) {
  top: 235px;
  left: 125px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.circle li:nth-child(4) {
  top: 125px;
  left: 15px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

Following is foo.js referenced in the <head> of your HTML. Using jQuery you can accomplish the desired behavior without using :focus...

//wait for the document to load
$(function() {

    //when the user clicks "one" in the menu
    $('.menu>.one').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(0deg)',
            '-moz-transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)',
            '-o-transform': 'rotate(0deg)',
            'transform': 'rotate(0deg)'
        });
    });

    //when the user clicks "two" in the menu
    $('.menu>.two').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-90deg)',
            '-moz-transform': 'rotate(-90deg)',
            '-ms-transform': 'rotate(-90deg)',
            '-o-transform': 'rotate(-90deg)',
            'transform': 'rotate(-90deg)'
        });
    });

    //when the user clicks "three" in the menu
    $('.menu>.three').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-180deg)',
            '-moz-transform': 'rotate(-180deg)',
            '-ms-transform': 'rotate(-180deg)',
            '-o-transform': 'rotate(-180deg)',
            'transform': 'rotate(-180deg)'
        });
    });

    //when the user clicks "four" in the menu
    $('.menu>.four').click(function() {
        $('.circle').css({
            '-webkit-transform': 'rotate(-270deg)',
            '-moz-transform': 'rotate(-270deg)',
            '-ms-transform': 'rotate(-270deg)',
            '-o-transform': 'rotate(-270deg)',
            'transform': 'rotate(-270deg)'
        });
    });

});

Upvotes: 1

Related Questions