CODEWITHSUNDEEP
htmlcssbox-sizing
Lukeception
Lukeception

Reputation: 75

Make a div adjust to borders?

So i have the following html/css code

* {
    box-sizing: border-box;
}

.mainlink {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 30px;
    color: rgba(255,0,0,0.7);
    transition: 0.3s ease-in-out;
    text-decoration: none;
    padding: 10px;
}

.mainbtn {
    transition: 0.3s ease-in-out;
    border: 1px solid rgba(255,0,0,1);
    width: 40%;
    position: relative;
    margin: auto;
    height: auto;
}

div.content {
    position: absolute;
    transform: translate(-1px,1px);
    width: 100%;
}

.content a {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 22px;
    color: rgba(255,0,0,0.7);
    display: block;
    list-style: none;
    background-color: #eee;
    transition: 0.2s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainbtn">
  <a href="#" class="mainlink">Hello</a>
  <div class="content">
    <a href="#">World</a>
    <a href="#">You</a>
    <a href="#">Me</a>
  </div>
</div>

The goal of this little exercise was to create a dropdown menu. So hovering above the "Hello" and the div with class="mainbtn" should expand the list of links (I've left out the animations and transitions since that isn't part of the problem). The problem is that the links inside the div with class="content" does not expand all the was to the edge of boarder of the div with class="mainbtn". At first i thought a simple box-sizing: border-box would fix the problem but it doesn't. Any idea how i can make the div with class="content" and the links inside it have the width of the entire div with class="mainbtn" PLUS its border?

Upvotes: 0

Views: 56

Answers (2)

user4602228
user4602228

Reputation:

See the following fiddle : https://jsfiddle.net/q9k87f5c/

This is probably the most minimal setup I could think of... fix the css to fit your needs.

<div class="items">
  <div class="item">
  Hello
  <div class="items">
    <div class="item">World</div>
  </div>
  </div>
</div>

.item{
  position:relative;
}
.item .items{
  display:none;
}
.item:hover .items{
  display:block;
  position:absolute;
}

the basic idea is adding an on hover display for the nested items. which are all hidden in the first place...

Upvotes: 0

Matthew
Matthew

Reputation: 932

I find that it is easier to make a custom dropdown if you wrap the links that are supposed to appear in a ul tag.

In this fiddle I added the mainlink anchor tag into the content div then wrapped the other links in a ul tag with li tags around the anchor tags like so:

<div class="mainbtn">
    <div class="content">
        <a href="#" class="mainlink">Hello</a>
        <ul>
            <li><a href="#">World</a></li>
            <li><a href="#">You</a></li>
            <li><a href="#">Me</a></li>
        </ul>
    </div>
</div>

Then I use the css below to achieve the result that you see in the fiddle.

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

.content .mainlink:hover ~ ul,
.content .mainlink ~ ul:hover {
    display: block;
}

I also took the border from the mainbtn class and put it on the content class so the border would expand when the dropdown appears. You can see that here in this updated fiddle.

.mainbtn {
    transition: 0.3s ease-in-out;
    width: 40%;
    position: relative;
    margin: auto;
    height: auto;
}

div.content {
    position: absolute;
    transform: translate(-1px,1px);
    width: 100%;
    border: 1px solid rgba(255,0,0,1);
}

Upvotes: 0

Related Questions