CODEWITHSUNDEEP
css
Akash Solanki
Akash Solanki

Reputation: 15

Option menu alignment is not proper

I have created a option button for my project. The code is given below.I am trying to make proper alignment of .dotlist is moving on right side. It should me on left portion of dot button. What will be the solution for making perfect dot dropdown button thus the list appear properly.

$('.dottbtn').on('click', function(e) {
  e.stopPropagation();
  $('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
  $('.dotmenu').removeClass('dotopened');
});
body {
  margin: 0;
  background: tomato;
  font-family: 'Open Sans', sans-serif;
}

.dotted {
  display: inline-block;
  vertical-align: top;
  float: right;
}

.dottbtn {
  cursor: pointer;
  margin-top: 5px;
  width: 40px;
  height: 20px;
  z-index: 80;
  position: relative;
  align-items: flex-end;
}

.dottbtn {
  background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
  background-size: 17px 17px;
  height: 17px;
  width: 17px;
}

.dotmenu {
  width: 150px;
  border-radius: 10px;
  margin-top: 20px;
  display: inline-block;
  float: right;
  background: #fff;
  position: absolute;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.dotmenu.dotopened {
  visibility: visible;
  opacity: 1;
}

.dotmenu::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 7px;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dotmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dotmenu ul.dot-list {
  text-align: left;
  font-weight: 100;
  width: 100%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dotmenu ul.dot-list li a {
  text-decoration: none;
  padding-left: 20px;
  padding-top: 5px;
  color: #343434;
  font-weight: 600;
  display: block;
  line-height: 27px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.dotmenu ul.dot-list li a:hover {
  color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
  <div class="dottbtn"></div>
  <div class="dotmenu">
    <ul class="dot-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

Please help me to overcome from it.

Upvotes: 1

Views: 34

Answers (2)

Iulius
Iulius

Reputation: 678

Add right: 15px to .dottbtn and right: 10px to .dotmenu :

$('.dottbtn').on('click', function(e) {
            e.stopPropagation();
            $('.dotmenu').toggleClass('dotopened');
        });
        $(document).on('click', function() {
            $('.dotmenu').removeClass('dotopened');
        });
body {
            margin: 0;
            background: tomato;
            font-family: 'Open Sans', sans-serif;
        }
        
        .dotted {
            display: inline-block;
            vertical-align: top;
            float: right;
        }
        
        .dottbtn {
            cursor: pointer;
            margin-top: 5px;
            width: 40px;
            height: 20px;
            z-index: 80;
            position: relative;
            align-items: flex-end;
        }
        
        .dottbtn {
            background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
            background-size: 17px 17px;
            height: 17px;
            width: 17px;
            right: 15px;
        }
        
        .dotmenu {
            width: 150px;
            border-radius: 10px;
            margin-top: 20px;
            display: inline-block;
            float: right;
            background: #fff;
            position: absolute;
            box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
            z-index: 90;
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
            right: 10px;
        }
        
        .dotmenu.dotopened {
            visibility: visible;
            opacity: 1;
        }
        
        .dotmenu::before {
            content: '';
            position: absolute;
            top: -5px;
            right: 7px;
            width: 15px;
            height: 15px;
            background: #fff;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        
        .dotmenu ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .dotmenu ul.dot-list {
            text-align: left;
            font-weight: 100;
            width: 100%;
            margin: auto;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        
        .dotmenu ul.dot-list li a {
            text-decoration: none;
            padding-left: 20px;
            padding-top: 5px;
            color: #343434;
            font-weight: 600;
            display: block;
            line-height: 27px;
            -webkit-transition: all 200ms ease;
            transition: all 200ms ease;
        }
        
        .dotmenu ul.dot-list li a:hover {
            color: tomato;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
<div class="dottbtn"></div>
<div class="dotmenu">
    <ul class="dot-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>
</div>

Upvotes: 1

tao
tao

Reputation: 90247

Adding right:0; to your .dotmenu will fix it.

$('.dottbtn').on('click', function(e) {
  e.stopPropagation();
  $('.dotmenu').toggleClass('dotopened');
});
$(document).on('click', function() {
  $('.dotmenu').removeClass('dotopened');
});
body {
  margin: 0;
  background: tomato;
  font-family: 'Open Sans', sans-serif;
}

.dotted {
  display: inline-block;
  vertical-align: top;
  float: right;
}

.dottbtn {
  cursor: pointer;
  margin-top: 5px;
  width: 40px;
  height: 20px;
  z-index: 80;
  position: relative;
  align-items: flex-end;
}

.dottbtn {
  background: url('https://image.flaticon.com/icons/svg/483/483345.svg');
  background-size: 17px 17px;
  height: 17px;
  width: 17px;
}

.dotmenu {
  width: 150px;
  border-radius: 10px;
  margin-top: 20px;
  display: inline-block;
  float: right;
  background: #fff;
  position: absolute;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
  z-index: 90;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  right: 0;
}

.dotmenu.dotopened {
  visibility: visible;
  opacity: 1;
}

.dotmenu::before {
  content: '';
  position: absolute;
  top: -5px;
  right: 7px;
  width: 15px;
  height: 15px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dotmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dotmenu ul.dot-list {
  text-align: left;
  font-weight: 100;
  width: 100%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dotmenu ul.dot-list li a {
  text-decoration: none;
  padding-left: 20px;
  padding-top: 5px;
  color: #343434;
  font-weight: 600;
  display: block;
  line-height: 27px;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}

.dotmenu ul.dot-list li a:hover {
  color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dotted">
  <div class="dottbtn"></div>
  <div class="dotmenu">
    <ul class="dot-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions