Here is my CSS related to the side menu
.menu-panel{float:left;width:150px; background:#474544; position:absolute;left:0px; height:100%;top:0px; padding-top:93px; z-index:1; box-shadow:-6px 0px 8px -3px #141414 inset;}
ul.l-menu-items{float:left;}
ul.l-menu-items li{ display:block; padding:12px 0 12px 8px; }
ul.l-menu-items li a{padding-left:25px; display:inline-block; line-height:14px;}
ul.l-menu-items li.my-pf a{background-position:-6px -73px;}
ul.l-menu-items li.my-pf a:hover{ background-position:-6px -91px;}
ul.l-menu-items li.pr-list a{background-position:-6px -116px;}
ul.l-menu-items li.pr-list a:hover{background-position:-6px -137px;}
ul.l-menu-items li.user a{background-position:-6px -163px;}
ul.l-menu-items li.user a:hover{background-position:-6px -182px;}
ul.l-menu-items li.ad-pr a{background-position:-6px -202px; height:20px;}
ul.l-menu-items li.ad-pr a:hover{background-position:-6px -224px;}
ul.l-menu-items li.ex-tb a{background-position:-6px -251px; height:23px; line-height:1.5em;}
ul.l-menu-items li.ex-tb a:hover{background-position:-6px -278px;}
ul.l-menu-items li.pr-tb a{background-position:-6px -317px; height:23px; line-height:1.5em;}
ul.l-menu-items li.pr-tb a:hover{background-position:-6px -349px;}
ul.l-menu-items li a:hover{color:#f9f9f9;}
.menu-panel hr{border-bottom:1px solid #676767; border-top:1px solid #1e1e1e;margin-top:0px; clear:both;}
Can some help me to add a selected entry. I am trying to change the color, size and bold of the font of what was selected
HI
we can not solve your issue until don"t see what is happening so to move further can you share us the link or the code
to know what class in implementing on selected li .
Sorry… I am new to programming and asking for help. Here is the section:
<aside class="menu-panel content_1 content">
<ul class="l-menu-items">
<li class="pr-list">
<asp:LinkButton ID="lbhProject" runat="server" OnClick="lbhProject_Click" Text="Project Home">
</asp:LinkButton>
</li>
<li class="ad-pr">
<asp:LinkButton ID="btnNewProject" runat="server" Text="Add Project" OnClick="btnNewProject_Click" Style="margin-left: 0px">
</asp:LinkButton>
</li>
<li class="user">
<asp:LinkButton ID="lbhUser" runat="server" OnClick="lbhUser_Click" Text="Users">
</asp:LinkButton>
</li>
<li class="ad-pr">
<asp:LinkButton ID="lbhScoreCard" runat="server" Text="Scorecard" OnClick="lbhScoreCard_Click" Style="margin-left: 0px">
</asp:LinkButton>
</li>
<li class="my-pf">
<asp:LinkButton ID="lbhMyProfile" runat="server" OnClick="lbhMyProfile_Click" Text="Password">
</asp:LinkButton>
</li>
<li class="lg-btn-cont">
<asp:LoginView ID="LoginView2" runat="server" >
<LoggedInTemplate>
<asp:LoginStatus ID="HeadLoginStatus" runat="server" ForeColor="#474544" LogoutAction="Redirect" OnLoggingOut="HeadLoginStatus_LoggingOut" LogoutText="Log Out" LogoutPageUrl="~/Default.aspx"/>
</LoggedInTemplate>
</asp:LoginView>
<span > Logout</span>
</li>
</ul>
</aside>
And here is the relevant CSS classes
.menu-panel{float:left;width:150px; background:#474544; position:absolute;left:0px; height:100%;top:0px; padding-top:93px; z-index:1; box-shadow:-6px 0px 8px -3px #141414 inset;}
ul.l-menu-items{float:left;}
ul.l-menu-items li{ display:block; padding:12px 0 12px 8px; }
ul.l-menu-items li a{padding-left:25px; display:inline-block; line-height:14px;}
ul.l-menu-items li.my-pf a{background-position:-6px -73px;}
ul.l-menu-items li.my-pf a:hover{ background-position:-6px -91px;}
ul.l-menu-items li.pr-list a{background-position:-6px -116px;}
ul.l-menu-items li.pr-list a:hover{background-position:-6px -137px;}
ul.l-menu-items li.user a{background-position:-6px -163px;}
ul.l-menu-items li.user a:hover{background-position:-6px -182px;}
ul.l-menu-items li.ad-pr a{background-position:-6px -202px; height:20px;}
ul.l-menu-items li.ad-pr a:hover{background-position:-6px -224px;}
ul.l-menu-items li.ex-tb a{background-position:-6px -251px; height:23px; line-height:1.5em;}
ul.l-menu-items li.ex-tb a:hover{background-position:-6px -278px;}
ul.l-menu-items li.pr-tb a{background-position:-6px -317px; height:23px; line-height:1.5em;}
ul.l-menu-items li.pr-tb a:hover{background-position:-6px -349px;}
ul.l-menu-items li a:hover{color:#f9f9f9;}
.menu-panel hr{border-bottom:1px solid #676767; border-top:1px solid #1e1e1e;margin-top:0px; clear:both;}
.filter-col{float:left;padding-left:10px;margin-bottom:20px;}
.filter-col p{display:block;}
.filter-col p span{ display:block;padding:5px 0}
.filter-col p input[type="text"]{ background:#676767; height:25px; width:98%;color:#a7a7a7; padding-left:5px;}
.lg-btn-cont{float:left;width:100%;padding-left:10px; margin-top:10px;}
.lg-btn-cont span{ float:left; font-size:13px; color:#c6c6c6; font-family: ‘open_sansregular’; line-height:1.8em; font:bold;}
.lg-btn-cont a{float:left;width:30px; height:30px; background-position:-6px -400px;margin-left:10px;}/* content_1 scrollbar */
.content_1>.mCustomScrollBox>.mCSB_scrollTools{height:96%;op:2%;}
I hope this is all the information that is needed.
Thanks
Is there any other js which is applying any class on click event for active li.. because it is not showing any class for active li.
try one thing check which class is implementing on click by pressing f12 and check through it..
Hi tberish,
Based on your post, you want to change the color, size and bold of the font of what was selected. As far as I know, JavaScript can achieve your goal. You may need add a JavaScript function as below.
<script type="text/javascript"> function onmouseclick(obj) { obj.style.color = "red"; //this change the color, you can revise it according to your demands obj.style.fontSize = "30px";//this change the size, you can revise it according to your demands obj.style.fontWeight = "900";// this change the bold, you can revise it according to your demands from 100 to 900 return true;// you may need to add this because you use onclick event } </script>
In order to more attractive, I revise your CSS as below.
ul.l-menu-items li.my-pf a{background-position:-6px -73px; text-decoration:none;} ul.l-menu-items li.pr-list a{background-position:-6px -116px; text-decoration:none;} ul.l-menu-items li.user a{background-position:-6px -163px; text-decoration:none;} ul.l-menu-items li.ad-pr a{background-position:-6px -202px; height:20px; text-decoration:none;}
I add text-decoration:none to remove the underline.
According to your requirements, I made a test on my computer, it worked fine. In order to achieve your goal, please try my code as below.
<title></title> <script type="text/javascript"> function onmouseclick(obj) { obj.style.color = "red"; //this change the color, you can revise it according to your demands obj.style.fontSize = "30px";//this change the size, you can revise it according to your demands obj.style.fontWeight = "900";// this change the bold, you can revise it according to your demands from 100 to 900 return true;// you may need to add this because you use onclick event } </script> <style type="text/css"> .menu-panel{float:left;width:150px; background:#474544; position:absolute;left:0px; height:100%;top:0px; padding-top:93px; z-index:1; box-shadow:-6px 0px 8px -3px #141414 inset;} ul.l-menu-items{float:left;} ul.l-menu-items li{ display:block; padding:12px 0 12px 8px; } ul.l-menu-items li a{padding-left:25px; display:inline-block; line-height:14px;} ul.l-menu-items li.my-pf a{background-position:-6px -73px; text-decoration:none;} ul.l-menu-items li.my-pf a:hover{ background-position:-6px -91px;} ul.l-menu-items li.pr-list a{background-position:-6px -116px; text-decoration:none;} ul.l-menu-items li.pr-list a:hover{background-position:-6px -137px;} ul.l-menu-items li.user a{background-position:-6px -163px; text-decoration:none;} ul.l-menu-items li.user a:hover{background-position:-6px -182px;} ul.l-menu-items li.ad-pr a{background-position:-6px -202px; height:20px; text-decoration:none;} ul.l-menu-items li.ad-pr a:hover{background-position:-6px -224px;} ul.l-menu-items li.ex-tb a{background-position:-6px -251px; height:23px; line-height:1.5em;} ul.l-menu-items li.ex-tb a:hover{background-position:-6px -278px;} ul.l-menu-items li.pr-tb a{background-position:-6px -317px; height:23px; line-height:1.5em;} ul.l-menu-items li.pr-tb a:hover{background-position:-6px -349px;} ul.l-menu-items li a:hover{color:#f9f9f9;} .menu-panel hr{border-bottom:1px solid #676767; border-top:1px solid #1e1e1e;margin-top:0px; clear:both;} </style> </head> <body> <form id="form1" runat="server"> <aside class="menu-panel content_1 content"> <ul class="l-menu-items"> <li class="pr-list"> <asp:LinkButton ID="lbhProject" runat="server" Text="Project Home" OnClientClick="return onmouseclick(this)" Height="50px" Width="230px"></asp:LinkButton> </li> <li class="ad-pr"> <asp:LinkButton ID="btnNewProject" runat="server" Text="Add Project" Style="margin-left: 0px" OnClientClick="return onmouseclick(this)" Height="50px" Width="230px"> </asp:LinkButton> </li> <li class="user"> <asp:LinkButton ID="lbhUser" runat="server" Text="Users" OnClientClick="return onmouseclick(this)" Height="50px" Width="230px"> </asp:LinkButton> </li> <li class="ad-pr"> <asp:LinkButton ID="lbhScoreCard" runat="server" Text="Scorecard" Style="margin-left: 0px" OnClientClick="return onmouseclick(this)" Height="50px" Width="230px"> </asp:LinkButton> </li> <li class="my-pf"> <asp:LinkButton ID="lbhMyProfile" runat="server" Text="Password" OnClientClick="return onmouseclick(this)" Height="50px" Width="230px"> </asp:LinkButton> </li> <li class="lg-btn-cont"> <asp:LoginView ID="LoginView2" runat="server" > <LoggedInTemplate> <asp:LoginStatus ID="HeadLoginStatus" runat="server" ForeColor="#474544" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/Default.aspx"/> </LoggedInTemplate> </asp:LoginView> <span > Logout</span> </li> </ul> </aside> </form> </body>
If you have any other concern about it, please feel free to let me know.
Best regards,
Archer Wang