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>
Related
I have a menu like this:
<div class="menu-hori" id="myMenu">
<ul>
<li>☰</li>
<li><a>1</a>
<ul>
<li><a>Sub 1</a>
<ul>
<li><a>SubSub 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
When I click the hamburger icon in the top ListItem, the menu opens. So the functionality is fine. Though it does not look nice, how can I use css to give it a smooth fold out? A nice flow down?
Forgive me, I know this question has already been asked but I wasn't able to find a solution and I've been trying for days with no luck.
I removed the "Pages widget" from Blogger in order to create a custom navigation bar with drop down menus. Everything works fine, except my tabs WILL NOT CENTER. The nav bar itself seems to be centered... just not the tabs. I feel like I've tried every code out there! It's driving me nuts!
http://www.ginachristiansenphotography.com
Please, please help!
Just add center ;) tag in the ul.
<ul id="cssnav">
<center>
<li class="active">Home</li>
<li>About
</li>
<li>Blog
</li>
<li>Archives
</li>
<li>Services
<ul>
<li>General Pricing</li>
<li>Weddings</li>
<li>Dream Scenes</li>
</ul>
</li><li>Galleries
</li>
<li>Contact
</li>
</center>
</ul>
Below CSS will make the tab nav center
#cssnav{text-align:center}
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.
I have the following design problem. I have a list of items and I want to make the whole of each of the first li to be a clickable link. I have tried adding a link in each li, making it a block level element and positioning it absolute, but that doesn't work because the parent and all li's are floated left for layout purposes. Any help would be appreciated, thanks
<ul style='float:left;width:x>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
<li>
<ul>
<li>Title</li>
<li>Description</li>
</ul>
</li>
</ul>
If the parent li has position: relative, you can position things absolutely inside it without messing with the way the parent floats around.
Another, somewhat inelegant solution would be to add an onclick event to each of the parent lis, and use JavaScript to change the URL. Also, add cursor: pointer to your CSS to make it look like a link. But as I said, this is not elegant.
Have you thought about jQuery as an option? Its probably not the best solution but it would work. so i would rig something up like this:
$("ul li:first-child").bind('click',function(){
// click event here.
alert("Boom!");
$(this).find("li a").trigger('click');
});
and i would have your code look like this:
<ul>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
<li>
<ul>
<li>title</li>
<li>description</li>
</ul>
</li>
</ul>
Put the links in the li and use display:block. Don't absolutely position them.
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.