CODEWITHSUNDEEP
htmlcssnavigationslidingmenu
bijoume
bijoume

Reputation: 365

Sliding horizontal navigation

I'm quite new to CSS and out of ideas about how to make this kind of navigation work. By default, the navigation should look like this:

enter image description here

When the contact section is hovered, it looks like this:

enter image description here

And of course, it should work the other way around as well:

enter image description here

You can see my markup, CSS and demo here: https://jsfiddle.net/xr2jp5r9/. I'll paste the HTML/CSS here too:

<body>
<div id="navigation-menu">
  <div id="portfoolio">
    <h4>PORTFOOLIO</h4>
    <nav id="portfoolionav">
      <ul>
        <li>sisearhitektuur</li>
        <li>graafiline disain</li>
        <li>tootedisain</li>
      </ul>
    </nav>
  </div>
  <!--end portfoolio-->

  <div id="kontakt">
    <h4>KONTAKT</h4>
    <p id="kontaktadd">Männiku tee 31a, 11214, Tallinn, Estonia</p>
  </div>
  <!--end kontakt--> 
</div>
<!--end navigation-menu-->

</body>

And the CSS:

.body
{
    background-color: white;
}

#navigation-menu
{
    height: 100px;
    line-height: 100px;
    font-family: 'Lato', sans-serif;
}

#portfoolio
{
    position: fixed;
    color: white;
    text-align: right;
    top: 0px;
    left: 0px;
    width: 50%;
    background-color: #3BB6E4;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

#portfoolio h4
{
    padding-right: 30px;
}

#portfoolio:hover
{
    width: 90%;
    z-index: 400;
}

#portfoolionav ul
{
    list-style-type: none;
}

#portfoolionav li
{
    display: inline;
    padding: 20px;
}

#kontakt
{
    color: white;
    text-align: left;
    top: 0px;
    right: 0px;
    width: 50%;
    position: fixed;
    background-color: #E8940D;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

#kontakt h4
{
    padding-left: 30px;
}

#kontakt:hover
{
    width: 90%;
}

So how can I center all the sections to one line + hide the submenu and the address? Also, the submenu and the address are sliding along when hovering, they shouldn't do that.

I hope that someone can help me, I'd really appreciate this. Thanks. :)

Upvotes: 0

Views: 383

Answers (1)

Paul Leclerc
Paul Leclerc

Reputation: 1137

Maybe you could use something like the typical carousel system. A container with both of the menus at their greatest size, and a "window" div with specific width (here the page's one) and slide components in it.

Do not change menus widths but theirs positions in the big container. We could just see menus sliding/moving, and during this movement you can easily change the title font-size.

You can use Jquery to find and manage the best menus widths when the page loads or resize.

Sry for my english ;)

Upvotes: 1

Related Questions