CODEWITHSUNDEEP
javascripthtmlcss
NaughtySquid
NaughtySquid

Reputation: 2097

Why does this dropdown move another element?

I am creating a new navbar for my site, and using JS to open some simple hidden content divs.

I have the parent selectors where I want them, but when I click on one, it makes the other parent jump.

http://codepen.io/NaughtySquid/pen/xRYaWd

// dropdowns
function toggle_visibility(id){
  event.preventDefault();
  // close any open menus
  // TODO
  // open this menu
  var e = document.getElementById(id);
  if(e.style.display == 'block')  {
    e.style.display = 'none';
  }else{
    e.style.display = 'block';
  }
}
.container {
    margin: 0px auto;
    width: 960px;
}
/* Navbar */
 .navigation-main {
     position: fixed;
     top: 0;
     width: 100%;
     height: 49px;
     z-index: 10001;
     background-color: #222;
 }
 .header-navbar {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 .caret-down {
   display: inline-block;
   width: 0px;
   height: 0px;
   vertical-align: middle;
   border-top: 4px solid #999;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   border-top-style: dotted;
   content: "";
 }
/* alerts menu */
.alerts-box {position: relative; float: right; right: 100px; color: #999; line-height: 29px;}
.alerts-box-new{background-color: #609FA9;}
.alerts-box-new:hover{background-color: #6FA8B1;}
.alerts-box-normal{background-color: #383838;}
.alerts-box-normal:hover{background-color: #4B4B4B;}
.alerts-box a {padding: 10px; height: 29px; display: block; color: #999;}
.alerts-box:hover{cursor: pointer;}
#alerts-content{
    display: none;
    position: relative;
    float: right;
    right: 65px;
    top: 49px;
    background: #222;
    box-shadow: 1px 1px 1px black;
    padding: 5px;
}
/* user menu */
.user-box {position: relative; float: right; right: 0px; color: #999; line-height: 29px;}
#user-box-content{
    display: none;
    position: relative;
    float: right;
    right: -50px;
    top: 49px;
    background: #222;
    box-shadow: 1px 1px 1px black;
    padding: 5px;
}
.nav-special-content ul {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: #999;
}
.nav-special-content a {display: block; color: #999;}
.nav-special-content a:hover {color: #fff;}
<div class="navigation-main">
    <div class="container group">
<div class="alerts-box right hide-small alerts-box-normal">
    <a href="#" onclick="toggle_visibility('alerts-content')"> <img src="https://www.gamingonlinux.com/templates/default/images/comments/envelope-open.png" alt=""/></a>
</div>
<div id="alerts-content">
    <div class="nav-special-content">
        <ul>
            <li>{:comment_count} new comments</li>
            <li>{:message_count} new messages</li>
        </ul>
    </div>
</div>


    <div class="user-box hide-small">
        <a href="#" onclick="toggle_visibility('user-box-content')"><img class="nav-avatar" src="https://www.gamingonlinux.com/uploads/avatars/gallery/1.png" alt="" width="49" height="49"></a> <span class="caret-down"></span>
    </div>
    <div id="user-box-content">
        <div class="nav-special-content">
            <ul>
                <li><a href="/index.php?module=profile&user_id=1">View Profile</a></li>
                <li><a href="/usercp.php">User CP</a></li>
                {:admin_link}
                <li><a href="/index.php?act=Logout">Logout</a></li>
            </ul>
        </div>
    </div>

    </div>
</div>

Upvotes: 0

Views: 70

Answers (1)

Mehmet Baker
Mehmet Baker

Reputation: 1155

Put #alerts-content in .alerts-box and add some CSS like this:

#alerts-content {
  position: absolute;
  float: none;
  right: 0;
}

Upvotes: 1

Related Questions