Results 1 to 1 of 1

Thread: How to switch the active style of css menu item

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member feelinforyou's Avatar
    Join Date
    Dec 2012
    Vote Rating

    Default How to switch the active style of css menu item


    i have designed a css menu and i want to switch the current active item. I tried to listen to the clickevent of the labels, but the style won't change, because the labels are wraped into a div element. how can i get the a element (label1) with the "current"-class style and remove the style? After that, add the current style to label2?

    If this isn't the right approach, can you help me and tell me a better solution?

    The code:
    private Label label2;
    private Label label1;
    public void onModuleLoad() {
            final Viewport viewport = new Viewport();
            RootPanel.get().add(viewport, 0, 0);
        private HtmlLayoutContainer createHeader() {
            final SafeHtmlBuilder sb = new SafeHtmlBuilder();
            sb.appendHtmlConstant("<div id='tabs26'>" + "<ul><li><a href='#' class='label1 current'></a></li> "
                    + "<li><a href='#' title='css menus' class='label2'></a></li> "
                    + "<li><a href='#' title='css menus'>Services</a></li> "
                    + "<li><a href='#' title='css menus'>Our Work</a></li> "
                    + "<li><a href='#' title='css menus'>Contact Us</a></li> " + "</ul> </div>");
            final HtmlLayoutContainer htmlLcHeader = new HtmlLayoutContainer(sb.toSafeHtml());
            label1 = new Label("Table");
            label1.addClickHandler(new ClickHandler() {
                public void onClick(ClickEvent event) {
                    label1.setStyleName("current", false);
                    label2.setStyleName("current", true);
            label2 = new Label("Results");
            label2.addClickHandler(new ClickHandler() {
                public void onClick(ClickEvent event) {
                    label2.setStyleName("current", true);
                    label1.setStyleName("current", false);
            htmlLcHeader.add(label1, new HtmlData(".label1"));
            htmlLcHeader.add(label2, new HtmlData(".label2"));
            return htmlLcHeader;
    The CSS-Sheet:
    #tabs26 {
        position: relative;
        display: block;
        height: 42px;
        font-size: 11px;
        font-weight: bold;
        background: transparent url(../images/greenslate_background.gif) repeat-x
            top left;
        font-family: Arial, Verdana, Helvitica, sans-serif;
        text-transform: uppercase;
        width: 100%;
        overflow: hidden;
    #tabs26 ul {
        position: relative;
        margin: 0px auto;
        padding: 0;
        list-style-type: none;
        left: 50%;
        float: left;
    #tabs26 ul li {
        position: relative;
        display: block;
        float: left;
        margin: 0 1px 0 0;
        right: 50%;
    #tabs26 ul li a {
        position: relative;
        display: block;
        color: #EEFFDF;
        text-decoration: none;
        padding: 14px 22px 0 22px;
        height: 28px;
    #tabs26 ul li a:hover,#tabs26 ul li a.current {
        color: #fff;
        background: transparent url(../images/greenslate_backgroundOVER.gif)
            no-repeat top center;
    I have attached the java-class, the style sheet and the pictures.
    Attached Files Attached Files

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts