CODEWITHSUNDEEP
csswidthcss-transitions
xR34P3Rx
xR34P3Rx

Reputation: 395

Inverse width transition from left to right to right to left

I'm reverse engineering the navigation in http://dreamelectronic.com/ (must use desktop for correct view) but in my own way.

I practically have it down, spot on, but i have one little issue i need to fix to get it just right. what i have is 2 div's that are on top of eachother and they both increase the width of the top border as see in the website. BUT one div starts at the center and stretches from center to the right and the other one stretches from the left to the center (if that makes sense). i need the second div (div2 if you go and read my code from CSSDeck) to start from the center and stretch to the left.

What i have tried is to use transform: rotateX(-180deg); as suggested from one of the answers from another question, i also tried to set the test-align: right; on the div2 also suggested. I tried animation-direction: alternate; too but no cake.

I have come across several similar situations on here but none have worked for me so far.

CSSDeck Project

Many thanks if i can get this last detail down!

Upvotes: 0

Views: 4034

Answers (2)

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

You could set the below properties on your div2:

div2 {
  float: right;
  margin-right: 50px;
  ...
}

Snippet:

ul {
    padding: 0;
    margin: 20px;
}
li {
    float: left;
    list-style: none;
    display: inline-block;
    width: 100px;
}
div1 {
    margin-left: 50px;
    text-align: center;
    line-height: 3;
    display: block;
    position: absolute;
    width: 0px;
    height: 50px;
    border-top: 3px solid #D50;
    transition: all .4s ease-in-out;
    opacity: 0;
}
div2 {
    float: right;
    margin-right: 50px;
    text-align: center;
    line-height: 3;
    display: block;
    width: 0px;
    height: 50px;
    border-top: 3px solid #D50;
    transition: all .4s ease-in-out;
    opacity: 0;
}
men a {
    text-align: center;
    line-height: 3;
    color: #444;
    text-decoration: none;
    display: block;
    position: absolute;
    width: 100px;
    height: 50px;
    z-index: 1;
    transition: color .4s ease;
    margin-top: 4px;
}
men a:hover {
    color: #D50;
}
men a:hover~div1 {
    width: 50px;
    opacity: 1;
}
men a:hover~div2 {
    width: 50px;
    opacity: 1;
}
<ul>
  <li>
    <men>
      <a href="#">HOME</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">ABOUT</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">PRODUCTS</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
  <li>
    <men>
      <a href="#">CONTACT</a>
      <div1></div1>
      <div2></div2>
    </men>
  </li>
</ul>

So your div1 is pushed using margin-left (which you already had) and your div2 is first forced to float from right and then pushed using margin-right.

Hope this helps.

P.S. Don't forget to close the div2.

Upvotes: 2

KZee
KZee

Reputation: 446

You can use positioning for "right-to-left" div:

position: absolute;
right: 0;

http://jsfiddle.net/u5ofdp9m/1/

Upvotes: 0

Related Questions