transition navbar semantic-ui

Question

transition navbar semantic-ui

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I want to create a transition in navbar (menu), when I scroll the page scroll, I do not know the name of the effect but it's this one (it just rolls down and the navbar is solid with a white background, or roll up it dissolves with a fade out effect) so that's the effect I want to create, I'm using the semantic-ui framework, of this effect, as soon as it occurs and the background becomes white, the font color also changes to black, what I did is only creates a simple fade effect, and does not change the text color!

HTML

<div class="ui inverted vertical masthead center aligned segment">
  <div class="ui inverted pointing borderless main menu">
    <div class="ui text container">
      <div href="#" class="header item">
        <img class="logo" src="https://semantic-ui.com/examples/assets/images/logo.png">ProjectName</div><ahref="#" class="item">Blog</a>
      <a href="#" class="item">Articles</a>
      <a href="#" class="ui right floated dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Link Item</div>
          <div class="item">Link Item</div>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <div class="item">
            <i class="dropdown icon"></i>
            Sub Menu
            <div class="menu">
              <div class="item">Link Item</div>
              <div class="item">Link Item</div>
            </div>
          </div>
          <div class="item">Link Item</div>
        </div>
      </a>
    </div>
  </div>
</div>

CSS

body {
    background-color: #FFFFFF;
  }
  .main.menu {
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition:
      box-shadow 0.5s ease,
      padding 0.5s ease
    ;
  }
  .main.menu .item img.logo {
    margin-right: 1.5em;
  }
  .overlay {
    float: left;
    margin: 0em 3em 1em 0em;
  }
  .overlay .menu {
    position: relative;
    left: 0;
    transition: left 0.5s ease;
  }
  .main.menu.fixed {
    background-color: #FFFFFF;
    border: 1px solid #DDD;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  }
  .overlay.fixed .menu {
    left: 800px;
  }

JS

  $(document)
    .ready(function() {

      // fix main menu to page on passing
      $('.main.menu').visibility({
        type: 'fixed'
      });
      $('.overlay').visibility({
        type: 'fixed',
        offset: 40
      });

      // show dropdown on hover
      $('.main.menu  .ui.dropdown').dropdown({
        on: 'hover'
      });
    })
  ;

How can I create this effect?

html css nav-bar semantic-ui

asked by anonymous 16.01.2018 / 20:01

2 answers

Can someone explain to me what this code does line by line? How to concatenate this js [closed]

score 1 · Answer 1

In CSS, you should add the color attribute in the .main.menu.fixed class, for example:

.main.menu.fixed {
  background-color: #FFFFFF;
  color: #333333;
  border: 1px solid #DDD;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
}

In a solution using jQuery you could also check the occurrence of Scroll and remove the class inverted from the Menu, and add it when the scroll returns to the top.

$('.main.menu').removeClass('inverted');
$('.main.menu').addClass('inverted');

score 1 · Answer 2

You can apply a color to all elements of div fixed with CSS:

div.menu.fixed *,
div.menu.fixed a.floated.dropdown.item{
   color: #000 !important;
}

div.menu.fixed a:hover,
div.menu.fixed a.floated.dropdown.item:hover{
   color: #000 !important;
   background-color: #f5f5f5 !important;
}

In the case above, I put #000 (black). The first line applies the color to all elements within div . The second to dropdown .

In the second block, apply colors in hover , both to links and dropdown .

The !important is to ignore the default style of the component.

See:

$(document)
    .ready(function() {

      // fix main menu to page on passing
      $('.main.menu').visibility({
        type: 'fixed'
      });

      $('.overlay').visibility({
        type: 'fixed',
        offset: 40
      });
      // show dropdown on hover
      $('.main.menu  .ui.dropdown').dropdown({
        on: 'hover'
      });
    })
  ;

body {
    background-color: #FFFFFF;
  }
  .main.menu {
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition:
      box-shadow 0.5s ease,
      padding 0.5s ease
    ;
  }
  .main.menu .item img.logo {
    margin-right: 1.5em;
  }
  .overlay {
    float: left;
    margin: 0em 3em 1em 0em;
  }
  .overlay .menu {
    position: relative;
    left: 0;
    transition: left 0.5s ease;
  }
  .main.menu.fixed {
    background-color: #FFFFFF !important;
    border: 1px solid #DDD !important;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2) !important;
  }
  .overlay.fixed .menu {
    left: 800px;
  }

div.menu.fixed *,
div.menu.fixed a.floated.dropdown.item{
   color: #000 !important;
}

div.menu.fixed a:hover,
div.menu.fixed a.floated.dropdown.item:hover{
   color: #000 !important;
   background-color: #f5f5f5 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script><divclass="ui inverted vertical masthead center aligned segment">
  <div class="ui inverted pointing borderless main menu">
    <div class="ui text container">
      <div href="#" class="header item">
        <img class="logo" src="https://semantic-ui.com/examples/assets/images/logo.png">ProjectName</div><ahref="#" class="item">Blog</a>
      <a href="#" class="item">Articles</a>
      <a href="#" class="ui right floated dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Link Item</div>
          <div class="item">Link Item</div>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <div class="item">
            <i class="dropdown icon"></i>
            Sub Menu
            <div class="menu">
              <div class="item">Link Item</div>
              <div class="item">Link Item</div>
            </div>
          </div>
          <div class="item">Link Item</div>
        </div>
      </a>
    </div>
  </div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />