too long

Question

I created the menu in my website like this. and I want to add active class to current page menu-item.

My menu codes:

<div class="menu-stili" role="main">
    <div id="menu-stili_bir">
        <?php
        $menular = Yii::app()->db->createCommand()
                    ->select('m.idmenu, m.menuparent_id, m.url, m.title_'.Yii::app()->language)
                    ->from ('menu m')
                    ->where('m.menuparent_id=0 and m.active="1"')
                    ->order('m.idmenu asc')->queryAll();

        echo "<ul class='menu' >";
        foreach($menular as $menu){
            if($menu['url'] == '#')
                $echoUrl = 'javascript:void(0);';
            else
                $echoUrl = $baseUrl.'/'.Yii::app()->language.$menu["url"];

            echo "<li>";
            echo "<a class='menu-li-a' href='".$echoUrl."' title='".$menu['title_'.Yii::app()->language]."'><strong>".$menu['title_'.Yii::app()->language]."</strong><span></span></a>";
        }
        echo "</ul>";
        ?>
    </div>
</div>

script

<script>
    $(document).ready(function() {
        $('.menu li a').on('click', function () {
            $('a', this).removeClass('menu-li-a').addClass('aktiv-menu');
        });
    });
</script>

style.css

.menu-stili {
    background: rgb(44,83,158);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjNTM5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYzUzOWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgb(44,83,158) 0%, rgb(44,83,158) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(44,83,158)), color-stop(100%,rgb(44,83,158)));
    background: -webkit-linear-gradient(top, rgb(44,83,158) 0%,rgb(44,83,158) 100%);
    background: -o-linear-gradient(top, rgb(44,83,158) 0%,rgb(44,83,158) 100%);
    background: -ms-linear-gradient(top, rgb(44,83,158) 0%,rgb(44,83,158) 100%);
    background: linear-gradient(to bottom, rgb(44,83,158) 0%,rgb(44,83,158) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e', endColorstr='#2c539e',GradientType=0 );
    padding: 10px;
    display: block;
    position: absolute;
    min-width: 850px;
    width: 98.5%;
    z-index: 2;
}

#menu-stili-bir {
    margin: 0 auto;
}   
.menu {
    padding-top: 7px;
    margin-left: 6%;
}
.menu li {
    float: left;
    position:relative;
    list-style: none;
}
.menu-li-a {
    display:inline-block;
    font-size:15px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    line-height:1.2em;
    padding-bottom:10px;
    color: #cedce7;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -ms-transition: color 1s ease;
    -o-transition: color 1s ease;
    transition: color 1s ease;
    position:relative;
    overflow:hidden;
}
.aktiv-menu {
    display:inline-block;
    font-size:15px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    line-height:1.2em;
    padding-bottom:10px;
    position:relative;
    overflow:hidden;
    color: #ffffff;
}
.menu li a:hover{
    color: #ffffff;
    -webkit-transition: color 1s ease;
    -moz-transition: color 1s ease;
    -ms-transition: color 1s ease;
    -o-transition: color 1s ease;
    transition: color 1s ease;
}
.menu li strong {
    display:inline-block;
    padding:0 15px;
    font-weight: normal;
}
.menu li span {
    display: block;
    height: 1.5px;
    background-color: white;
    position: absolute;
    bottom: 0;
}

The items comes from database. So I the CMenu did bot help me. I don't know the missing codes... Please help to solve problem. Thanks.

Answer 1

Your Javascript wont work because the page will be redirected to another page, you better handle adding the class in your PHP code:

$current_url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
foreach($menular as $menu){
            if($menu['url'] == '#')
                $echoUrl = 'javascript:void(0);';
            else
                $echoUrl = $baseUrl.'/'.Yii::app()->language.$menu["url"];

if($menu['url'] == $current_url)
    $active_class='active';
else
    $active_class='';

            echo "<li>";
            echo "<a class='menu-li-a $active_class' href='".$echoUrl."' title='".$menu['title_'.Yii::app()->language]."'><strong>".$menu['title_'.Yii::app()->language]."</strong><span></span></a>";
        }

Hope you sort it out :)