I am trying to make a bootstrap single level menu using angularJS.
It already works with js and html when the <li> is dynamically built.
Now I am trying to use AngularJS.
Suppose I have a JS object which has Cust and then orders inside.
How can I make a list menu
<ul>
<li ng-repeat="cust in customers">
<p>{{cust.name}}</p>
<li ng-repeat="order in cust.orders">
<p>{{order.desc}}</p>
</li>
</li>
<ul>
This doesn't load properly (overlapping items) as the first li can't be closed.
Christopher is right, you can't do without <ul>.
I think you can do this to have a one level menu :
<ul>
<li ng-repeat="cust in customers">
<p>{{cust.name}}</p>
<div ng-repeat="order in cust.orders">
<p>{{order.desc}}</p>
</div>
</li>
<ul>
And perhaps play with CSS to style in the way you want.
Or this, too :
<ul>
<li ng-repeat="cust in customers">
<p>{{cust.name}}</p>
<p ng-repeat="order in cust.orders">
{{order.desc}}
</p>
</li>
<ul>
That's invalid markup, you're missing a ul
Try
<ul>
<li ng-repeat="cust in customers">
<p>{{cust.name}}</p>
<ul>
<li ng-repeat="order in cust.orders">
<p>{{order.desc}}</p>
</li>
</ul>
</li>
</ul>
That should render it correctly, your bindings are correct.
Related
Here is my HTML
<ul class="menu">
<li class="menu__item">
</li>
<li class="menu__item">
<ul class="list"> // can I place this block inside here?
<li class="list__item">
...
</li>
<li class="list__item">
...
</li>
</ul>
</li>
</ul>
In this case, I place the block list inside the element menu__item.
I wonder, is this legal?
As per this documentation from BEM, we can nest the blocks. I.e. a block can have another block in it.
The only condition is that the children blocks should be independent on the parent.
https://en.bem.info/methodology/block-modification/#placing-a-block-inside-another-block
Yes, it is valid. See example from section Nested Lists
in - https://html.com/lists/.
i am using below code
<div>
<div id="aboxound" >
<ul>
<li class="aHeader" >
<ul>
<li class="Name">Names</li>
<li class="Name">values</li>
</ul>
</li>
<li style="height:500px; overflow-y:scroll;">
<c:forEach items="${dataModel.List}" var="entry">
<li class="aUser" >
<ul>
<li class="userName"><c:out value="${entry.key}" /></li>
<li class="userName"><c:out value="${entry.value}" /></li>
</ul>
</li>
</c:forEach>
</li>
</ul>
</div>
</div>
Here i want to apply scroll to second list, by keeping first list as fixed header. My above code is not working.it add empty scroll first and then list item without scroll. What i am doing wrong
If you write overflow:scroll even the not content not heavy it shows scroll, use overflow:auto in your code inplace overflow-y:scroll.
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
the page in question is http://www.streetstyles4all.co.uk/test4.html (general menu drop down problem)
Hi
I have decided to update my menu to use icons. I had a drop down menu working with no java script etc just css and html, and I tried to put icons beside each link in the drop down, but before I could go any further I could not get passed this problem, and get rid of the hover image that is used for the main navigation. The image appears next to every menu
I can't get passed this. Can anyone please advise.
My menu code is:
<ul id="menu">
<li id="home">Home</li>
<li id="general">General
<div class="dropdown_4columns">
<div class="col_1">
<h3>Street Styles 4 All</h3>
<ul id="submenu">
<li id="ss4aaboutus">About Us</li>
<li id="ss4aagency">Agency</li>
</ul>
</div>
<div class="col_1">
<h3>Events</h3>
<ul>
<li>What's on next</li>
<li>Competitions</li>
<li>End of Year Show</li>
<li>Summer School</li>
<li>Master Classes</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
<div class="col_1">
<h3>Dance Crew</h3>
<ul>
<li>Demo Squad</li>
<li>Pure Skillz</li>
<li>Performance Dates</li>
<li>How to Join</li>
</ul>
</div>
</div>
</li>
<li id="nearestclass">Nearest Class</li>
<li id="tutorials">Tutorials</li>
<li id="shop">Shop</li>
<li id="hireus">Hire Us</li>
<li id="contact">Contact</li>
the page in question is http://www.streetstyles4all.co.uk/test4.html
I think the hover state and the height for #general is getting applied to the LI elements that are inside the #general LI element. You may need to define a class for the inner LI elements and set the background as none and mark it !important.
Try using the css z-index property for your images. As easy as z-index: 3;
Or try resizing the images also with css.
The following menu works really fine in the browser, but I cant get it to validate as XHTML. I took this example out of my CSS Book. It says it is right, but seemingly it is not.
<ul id="leftNavi">
<li>
left menu1
</li>
<li class="SCNL">left menu2</li>
<ul id="subnavi">
<li>
menu2/1
</li>
<li>
menu2/2
</li>
<li>
menu2/3
<li>
</ul>
<li>
left menu3
</li>
</ul>
Here a link to the page: http://www.yiip.de/arbeit/testlayout/standard_template.html I am talking about the left menu.
<ul id="leftNavi">
<li >left menu1</li>
<li class="SCNL">left menu2
<ul id="subnavi">
<li>menu2/1</li>
<li>menu2/2</li>
<li>menu2/3</li>
</ul>
</li>
<li>left menu3</li>
</ul>
You had a couple of problems:
The line with 3 as the list item didn't have a correct closing <li> element; and
The subnav1 list wasn't contained within a <li> element. It can't be a direct child of another list, which was the main problem with validating your HTML.