Hi i have a menu control in asp.net....i write below code for that...and i bind the menu itemss dynamically..
DataView viewItem = new DataView(table);
viewItem.RowFilter = "Id=" + menuItem.Value;
foreach (DataRowView childView in viewItem)
{
DataSet ds = da.GetDataSet("select top 5 Id,PageName,PageLink from Tbl_MstPageMaster where ModuleId = " + childView["Id"].ToString() + " and IsActive = 'true'");
if (ds.Tables[0].Rows.Count > 0)
{
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
MenuItem childItem = new MenuItem(ds.Tables[0].Rows[i]["PageName"].ToString(), ds.Tables[0].Rows[i]["Id"].ToString());
childItem.NavigateUrl = ds.Tables[0].Rows[i]["PageLink"].ToString();
menuItem.ChildItems.Add(childItem);
//AddChildItems(table, childItem);
}
}
}
here i need to change menu's bacKground color and remove default border...how to remove thaT...anybody suggest me..
Use this Css
#Menu ul li a,
#Menu ul li a:active {outline:none;}
So you should write CSS for it
#YourMenuID
{
background-color: red or #customcolor;
color:white;
border:0px none;
}
Where # is the menu id
And call the style sheet in your page
<link rel="stylesheet" type="text/css" src="pathofyourstylesheet"/>
Related
I'm trying to learn how to select the <li> among the last three elements of a <ul> such that their (one-based) index is greater than the greatest multiple of 3 which is smaller than the number of list elements.
So for example:
if there are 9 <li> elements in <ul>, I want elements 1-6 to have font-weight:normal and elements 7,8 and 9 to have font-weight:bold.
if there are 8 <li> elements in <ul>, I want elements 1-6 to have font-weight:normal and elements 7 and 8 to have font-weight:bold.
if there are 7 <li> elements in <ul>, I want elements 1-6 to have font-weight:normal and element 7 to have font-weight:bold.
I tried this CSS selector but it seems to make everything bold:
li:nth-last-child(1n+0),
li:nth-last-child(2n+0),
li:nth-last-child(3n+0) {font-weight:bold;}
How else do I do this?
I think you want
li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+3):nth-child(3n+1) ~ * {
font-weight: bold;
}
That is, it selects the element among the last 3 whose index mod 3 is 1. And then it also adds the following siblings (if any).
/* Tests */
document.styleSheets[0].ownerNode.textContent += ".fail { color: red; } .fail::after { content: ' - FAIL'; }"
for (var i=0; i<10; ++i) {
var ul = document.body.appendChild(document.createElement('ul'));
for (var j=0; j<=i; ++j) {
var li = ul.appendChild(document.createElement('li'));
li.appendChild(document.createTextNode(j+1+'-th item '));
}
for (var j=0; j<=i; ++j) {
var li = ul.children[j];
var isSelected = getComputedStyle(li).fontWeight === '700';
if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = "fail";
}
}
li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+3):nth-child(3n+1) ~ * {
font-weight: bold;
}
In case there are more than three elements, you can simplify it to
li:nth-last-child(-n+4):nth-child(3n) ~ * {
font-weight: bold;
}
That is, it gets the element(s) among the last 4 whose index is a multiple of 3. And then it selects the following siblings.
/* Tests */
document.styleSheets[0].ownerNode.textContent += ".fail { color: red; } .fail::after { content: ' - FAIL'; }"
for (var i=0; i<10; ++i) {
var ul = document.body.appendChild(document.createElement('ul'));
for (var j=0; j<=i; ++j) {
var li = ul.appendChild(document.createElement('li'));
li.appendChild(document.createTextNode(j+1+'-th item '));
}
for (var j=0; j<=i; ++j) {
var li = ul.children[j];
var isSelected = getComputedStyle(li).fontWeight === '700';
if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = "fail";
}
}
li:nth-last-child(-n+4):nth-child(3n) ~ * {
font-weight:bold;
}
And if you dislike universal selectors,
li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+2):nth-child(3n+2),
li:nth-last-child(-n+1):nth-child(3n+3)
/* Tests */
document.styleSheets[0].ownerNode.textContent += ".fail { color: red; } .fail::after { content: ' - FAIL'; }"
for (var i=0; i<10; ++i) {
var ul = document.body.appendChild(document.createElement('ul'));
for (var j=0; j<=i; ++j) {
var li = ul.appendChild(document.createElement('li'));
li.appendChild(document.createTextNode(j+1+'-th item '));
}
for (var j=0; j<=i; ++j) {
var li = ul.children[j];
var isSelected = getComputedStyle(li).fontWeight === '700';
if(isSelected !== (j >= Math.floor(i/3)*3)) li.className = "fail";
}
}
li:nth-last-child(-n+3):nth-child(3n+1),
li:nth-last-child(-n+2):nth-child(3n+2),
li:nth-last-child(-n+1):nth-child(3n+3) {
font-weight: bold;
}
Use li:nth-last-child(-n+3)
That should give you the last 3 elements even if the list is dynamic. Whether the list has 10, 20 or 30 elements, it will always target the last 3
Rather than using n notation on :nth-last-child you can just use a number on :nth-child. Mind you, both of these solutions are technically targeting the first 6 items to override the styles that would be applied to the remaining list items.
li{
font-weight:bold;
}
li:nth-child(1),
li:nth-child(2),
li:nth-child(3),
li:nth-child(4),
li:nth-child(5),
li:nth-child(6){
font-weight:normal;
}
JSFIDDLE
Alternatively, if you wanted to use n notation you could use
li{
font-weight:bold;
}
li:nth-child(-n+6){
font-weight:normal;
}
to select the first 6 elements
JSFIDDLE
If you truly wanted to select all elements after the last 6 you would use:
li:nth-child(n+6) ~ *{
font-weight:bold;
}
JSFIDDLE
I want to create category list with sub category. The sub category will open when user clicks on the parent category. This is like a multi level menu tree.
The functionality works fine, but the style for the child nodes is not applying. The reason is that I create the sub menu dynamically and I cannot set the style rules.
Here is my code:
<template>
<div id="cat_menu">
<!--<category-service id="service" categories="{{categories}}"></category-service>-->
<iron-ajax id="ajax"
auto
url="../api/index.php"
method="POST"
last-response="{{categories}}"
params='{"tag":"get_cat_list"}'
handleAs="json">
</iron-ajax>
<template is="dom-repeat" items="{{categories.cat_list}}" filter="getParent" id="t">
<paper-fab mini id="fab_{{item.category_id}}" icon="edit" class="p_fab"></paper-fab>
<paper-menu id="{{item.category_id}}" class="cat_item" on-click="selectAction">
<span >{{item.category_name}}</span>
</paper-menu>
</template>
<div>
</template>
selectAction: function (e, detail) {
var str = '';
if (detail) {
var selectedItem = e.currentTarget;
//Polymer.dom(selectedItem).childNodes[1].innerHTML = '';
for (var i = 0; i < this.categories.cat_list.length; i++) {
//var item = new Object;
var item = this.categories.cat_list[i];
if (selectedItem.id == item.parent_id) {
var container = document.createDocumentFragment();
var paper_submenu = document.createElement('paper-menu');
paper_submenu.id = item.category_id;
paper_submenu.innerText = item.category_name;
paper_submenu.className = 'cat_item';
//paper_submenu.classList.add('cat_item');
paper_submenu.onclick = 'selectAction';
Polymer.dom(selectedItem.childNodes[1]).appendChild(paper_submenu);
Polymer.updateStyles();
}
}
}
}
CSS Style:
.cat_item {
border: 1px solid #acdcd8;
margin: 5px;
background-color: rgb(255, 255, 255);
padding-left: 10px;
}
The element cannot see this class cat-item. Can someone please help me solve this?
i'm making a workbook creator in C#.net ( using visual studio )
the book is build from the text part and the question part.
all the answers for the question are in side the text and the user need to click on the right answer.
if he's right then the word become green and if he's wrong it become red.
i'm using linkbutton for this and i need it to be without and "link" style.
i use this code for the question part:
public class question
{
public void createQusetion(Panel leftside, string text, string question,string answer)
{
string[] Qbuttonstext = text.Split(' ');
for (int i = 0; i < Qbuttonstext.Length; i++)
{
LinkButton answerButton = new LinkButton();
if (Qbuttonstext[i] == answer)
{
answerButton.ID = "answer";
}
else
{
answerButton.ID = "word" + i.ToString();
}
answerButton.Text = Qbuttonstext[i].ToString()+" ";
answerButton.CssClass = "textbuttonB4";
answerButton.Click += new EventHandler(checkAnswer);
leftside.Controls.Add(answerButton);
}
}
}
i used css stylesheet and used this code:
.textbuttonB4 a:link
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
.textbuttonB4 a:hover
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
.textbuttonB4 a:visited
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
when the code running the text is still appears as a link.
after looking the web for solution, dont konw why its not working.
sorry for the previous version of this question.
asaf
Check the output source. Does the button have the appropriate class? Did you remember to include the stylesheet?
Also, what does style:none; do? It's not valid CSS.
My table (that works perfectly on Chrome, FireFox and Opera) is not displaying correctly on Internet Explorer.
The background remains white! (I am using IE-8)
CSS code:
/*My Table*/
.my_table{
border-collapse:collapse;
font:normal 14px sans-serif,tahoma,arial,verdana;
margin:5px 0;
}
.my_table th{
color:#fff;
background:#5E738A;
border:1px solid #3C5169;
text-align:center;
padding:4px 10px;
}
.my_table td{
color:#555;
border:1px solid #C1CAD4;
text-align:center;
padding:2px 5px;
}
.my_table tr:nth-child(even){
background:#E6EDF5;
}
.my_table tr:nth-child(odd){
background:#F0F5FA;
}
As a good workaround, jQuery has added this to their project and achieving this using JavaScript is acceptable:
For my CSS, I would have
.my_table tr.even{
background:#E6EDF5;
}
.my_table tr.odd{
background:#F0F5FA;
}
And I would use jQuery to do this:
$(document).ready(function() {
$(".my_table tr:nth-child(even)").addClass("even");
$(".my_table tr:nth-child(odd)").addClass("odd");
});
IE8 doesn't support the nth-child selector I'm afraid:
http://reference.sitepoint.com/css/pseudoclass-nthchild
You can use first-child and "+" to emulate nth-child, example:
tr > td:first-child + td + td + td + td + td + td + td + td {
background-color: red;
}
That select the 9th column, just like nth-child(9), and that works on IE
This is the Dojo version, it works fine:
dojo.addOnLoad(function(){
dojo.query("table tr:nth-child(odd)").addClass("odd");
dojo.query("table tr:nth-child(even)").addClass("even");
});
I made some time ago, a prude simple javascript solution for this problem:
https://gist.github.com/yckart/5652296
var nthChild = function (elem, num) {
var len = elem.length;
var ret = [];
var i = 0;
// :nth-child(num)
if (!isNaN(Number(num))) {
for (i = 0; i < len; i++) {
if (i === num - 1) return elem[i];
}
}
// :nth-child(numn+num)
if (num.indexOf('+') > 0) {
var parts = num.match(/\w/g);
for (i = parts[2] - 1; i < len; i += parts[0] << 0) {
if (elem[i]) ret.push(elem[i]);
}
}
// :nth-child(odd)
if (num === 'odd') {
for (i = 0; i < len; i += 2) {
ret.push(elem[i]);
}
}
// :nth-child(even)
if (num === 'even') {
for (i = 1; i < len; i += 2) {
ret.push(elem[i]);
}
}
return ret;
};
The usage is quite simple and similar to the css-selector:
var rows = document.querySelectorAll('li');
var num = nthChild(rows, 2);
var formula = nthChild(rows, '3n+1');
var even = nthChild(rows, 'even');
var odd = nthChild(rows, 'odd');
// Note, forEach needs to be polyfilled for oldIE
even.forEach(function (li) {
li.className += ' even';
});
odd.forEach(function (li) {
li.className += 'odd';
});
formula.forEach(function (li) {
li.className += ' formula';
});
num.style.backgroundColor = 'black';
http://jsfiddle.net/ARTsinn/s3KLz/
I am trying to create a menu that highlights the current page. I have found a few answers here, but the problem is I can't see that anyone handles submenus.
There is an answer here that looks enticingly simple: active menu item - asp.net mvc3 master page
But as far as I can tell, that one will highlight only the sub menu item if you click on a submenu. I want the submenu item to be highlighted, as well as its parent in the top menu.
E.g. if someone clicks Services, and then Consulting, I would want both of these to be highlighted - Services in the top menu, and Consulting in the submenu. How can I do this?
BTW, I would like to be able to render the submenu both as a dropdown using CSS, and also as a sidebar. How can I take the submenu ul and render it as a sidebar?
Here is a simple thing, you can modify it according to your needs but basics are here.
http://developerstyle.posterous.com/highlighting-current-page-in-mvc-3-slick-tric
This above link might be down soon as posterous is closing, here is an update link
http://bhavinsurela.com/highlighting-current-page-in-mvc-3-slick-tric/
I have a solution which I in part also found here in SO and modified, but still as to be improved in order to handle any number of submenus... right now it works for a submenu.
namespace PhotoBuss.Web.Back.Controllers
{
public class NavigationController : BaseAdministrationController
{
//
// GET: /Common/
[ChildActionOnly]
public ActionResult HeaderMenu()
{
// http://stackoverflow.com/questions/4653226/asp-net-mvc-menu-selected-item
var items = new List<MenuItemViewModel>
{
new MenuItemViewModel{ Text = "home", Action="Index", Controller="Administration", Selected=false},
new MenuItemViewModel{Text = "manage", Action="Index", Controller="Manage", Selected=false,
SubMenu =
new List<MenuItemViewModel>
{
new MenuItemViewModel{ Text= "photos", Action="Index", Controller="Photos", Selected = false },
new MenuItemViewModel { Text = "collections", Action="Index", Controller="Collections", Selected=false},
new MenuItemViewModel { Text = "keywords", Action="Index", Controller="Keywords", Selected=false},
new MenuItemViewModel { Text = "users", Action="Index", Controller="Users", Selected=false},
new MenuItemViewModel { Text = "user groups", Action="Index", Controller="Roles", Selected=false}
}
},
new MenuItemViewModel{Text="cms", Action="Index", Controller="CMS", Selected=false}
};
string action = ControllerContext.ParentActionViewContext.RouteData.Values["action"].ToString();
string controller = ControllerContext.ParentActionViewContext.RouteData.Values["controller"].ToString();
foreach (var item in items)
{
if (item.Controller == controller && item.Action == action)
{
item.Selected = true;
}
foreach(var subItem in item.SubMenu)
if (subItem.Controller == controller && subItem.Action == action)
{
item.Selected =
subItem.Selected = true;
}
}
return PartialView(items);
}
}
The ViewModel
public class MenuItemViewModel
{
public MenuItemViewModel()
{
SubMenu = new List<MenuItemViewModel>();
}
public string Text { get; set; }
public string Controller { get; set; }
public string Action { get; set; }
public bool Selected { get; set; }
public List<MenuItemViewModel> SubMenu { get; set; }
}
}
The View
#model List<PhotoBuss.Web.Back.Models.Navigation.MenuItemViewModel>
<link href="#Url.Content("~/Areas/Admin/Content/CSS/menu.css")" rel="stylesheet" type="text/css" />
<div class="headerMenu">
<ul>
#foreach (var menuItem in Model)
{
<li>#Html.ActionLink(menuItem.Text, menuItem.Action, menuItem.Controller, null,
new { #class = menuItem.Selected ? "selected" : "" })
#if (menuItem.SubMenu.Count >0)
{
<ul class="#(menuItem.Selected ? "selected" : "")">
#foreach (var subMenu in menuItem.SubMenu)
{
<li>#Html.ActionLink(subMenu.Text, subMenu.Action, subMenu.Controller, null,
new { #class = subMenu.Selected ? "selected" : "" })</li>
}
</ul>
}
</li>
}
</ul>
</div>
The CSS I'm using with this at the moment:
.headerMenu *
{
padding: 0;
margin: 0;
}
.headerMenu
{
position: relative;
background-color: #78C8FA;
width: 100%;
text-align: center;
color: #FFFFFF;
clear: both;
float: left;
margin-top: 10px;
}
.headerMenu ul
{
display: block;
list-style: none;
line-height: 3em;
height: 3em;
}
.headerMenu ul li
{
display: inline-block;
margin-left: 15px;
margin-right: 15px;
}
.headerMenu ul li a
{
display: block;
text-decoration: none;
color: white;
font-size: 1.5em;
padding-left:2em;
padding-right:2em;
}
.headerMenu ul li a:visited
{
color: white;
}
.headerMenu ul li a:hover, .menu ul li
{
color: #333333;
}
.selected
{
color: #333333 !important;
display:block !important;
background-color: #999999;
}
.headerMenu ul ul
{
display: none;
position: absolute;
width: 100%;
right: 50%;
left: 0;
background-color: #999999;
}
.headerMenu li:hover > ul, .selected
{
display: block;
}
It's fairly simple to determine which menu element to highlight by simply using the ViewContext.RouteData.Values dictionary, specifically the Action and Controller keys.
Here's a quick helper method :
public static string IsSelected(this RouteValueDictionary dictionary, string controller, string action)
{
string cssClass = "selected";
string routeValueController = dictionary["Controller"] as string;
string routeValueAction = dictionary["Action"] as string;
return string.IsNullOrEmpty(action) ?
routeValueController == controller ? cssClass : string.Empty :
routeValueController == controller && routeValueAction == action ? cssClass : string.Empty;
}
And can be used from the view as such :
<ul id="menu">
<li class="#this.ViewContext.RouteData.Values.IsSelected("Default", "Index")">
Accueil
</li>
</ul>
It's hard to get into a more specific solution as I'm not familiar with your application structure, but this should give you an idea to get started.
Here is a example where they handle the submenus and highlight it.
http://users.tpg.com.au/j_birch/plugins/superfish/#sample4
It uses superfish-navbar.css where you can see how it is done.
It is a very good plugin for menus.