Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Mini-tabs menu - current highlighted problem

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 1168 Views
  • sammahoney
    Avatar
    Community Member
    14 Posts

    Mini-tabs menu - current highlighted problem Link to this post

    Hi All

    I've just installed SilverStripe after checking about 15 different CMS systems over the last few months, and I've definitely found what I was looking for. Took me 10 mins to set up a simple site, as opposed to trying to hack templates for a week before giving up...so big big up to the developers...

    Anyhow, just one thing I'm having trouble with. In the navigation menu, I read in the tutorial how to set it to show the current page, but I'm trying to fit that to the 'Mini Tabs Menu' (http://www.frequency-decoder.com/demo/animated-minitabs/).

    It's highlighting the current page as it loads, but then when everything is loaded it goes back to the first entry in the menu.

    My 'Navigation.ss' code is as follows:

    <ul id="miniflex">
       <% control Menu(1) %>   
          <li><a class="$LinkingMode" href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a></li>
       <% end_control %>
    </ul>

    And the CSS for the menu is:

    #miniflex {
    width: 100%;

          text-align: right;
    font-size: small; /* could be specified at a higher level */
    margin: 0;
    padding: 0px 0px 0 10px;
    border-bottom: 0px solid #696;
    position:relative;
    z-index:2;
    }

    #miniflex li {
    float: left;
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
    position:relative;
    }

    #miniflex a:link, #miniflex a:visited {
    float: left;
    font-size: 12px;
          font-family: Arial, Verdana, sans-serif;
    line-height: 20px;
    margin: 0 10px 0 15px;
          letter-spacing: 1px;
    text-decoration: none;
    color: #ffffff;
          background: none;
    }

    #miniflex a.current:link, #miniflex a.current:visited, #miniflex a:hover {
    border-bottom: 6px solid #C3D020;
    padding-bottom: 2px;
    color: #ffffff;
    }

    #animated-tab {
    position: absolute;
    z-index: 1;
    font-size: 85%;
    line-height: 14px;
    padding-bottom: 10px;
    border-bottom: 6px solid #C3D020;
    }
    br
    {
    clear:both;
    }

    Any ideas? The site is viewable at http://host.qsoftdns.net/~divinemo/silverstripe/reservations

    1168 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.