1. #1
    Sencha Premium Member feelinforyou's Avatar
    Join Date
    Dec 2012
    Posts
    72
    Answers
    4
    Vote Rating
    4
    feelinforyou is on a distinguished road

      0  

    Default Unanswered: How to switch the active style of css menu item

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


    Hello,

    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:
    Code:
    private Label label2;
    private Label label1;
    
    public void onModuleLoad() {
    
            final Viewport viewport = new Viewport();
            viewport.add(createHeader());
    
            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());
            htmlLcHeader.setId("headerBackground");
            htmlLcHeader.setStateful(false);
    
            label1 = new Label("Table");
            label1.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    label1.setStyleName("current", false);
                    label2.setStyleName("current", true);
                }
            });
            label2 = new Label("Results");
            label2.setHeight("42");
            label2.addClickHandler(new ClickHandler() {
                @Override
                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:
    Code:
    #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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar