CODEWITHSUNDEEP
htmlcssionic-framework
Mulgard
Mulgard

Reputation: 10589

Ionic: Floating Menu

I want to implement a floating menu like it is shown here: CSS Floating Menu But when i implement it like in the following Ionic Playground It does not work. When i scroll the view the floating menu does not stay fixed at the position i defined. It scrolls up.

So how can i implement a floating menu in ionic?

Upvotes: 0

Views: 2520

Answers (1)

Bharath S
Bharath S

Reputation: 374

Taking the floating content outside the ion-content worked. And edited style to avoid overlapping of floating content above the header....

    <ion-pane>
          <ion-header-bar class="bar-stable">
            <h1 class="title">Awesome App</h1>
          </ion-header-bar>

          <div class="floating-menu">
              <h3>Floating Menu</h3>
              <a href="http://www.quackit.com/css/">CSS</a>
              <a href="http://www.quackit.com/html/">HTML</a>
              <a href="http://www.quackit.com/javascript/">JavaScript</a>
              <a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
              <a href="http://www.quackit.com/database/">Database</a>
          </div>

          <ion-content>
          ...
          </ion-content>
    </ion-pane>

CSS

div.floating-menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;top:44px;}

Upvotes: 1

Related Questions