Javascript Angularjs中的菜单和子菜单
我是AngularJS的新手,我想设计菜单和子菜单,如下图所示- 我已经用AngularJS创建了菜单,如下图所示- 也添加了相同的代码 以下是此菜单的HTML页面-- 和控制器 ----------------------------------JS---------------- 控制器(“menuController”,函数($scope,$http){Javascript Angularjs中的菜单和子菜单,javascript,html,css,angularjs,angularjs-ng-repeat,Javascript,Html,Css,Angularjs,Angularjs Ng Repeat,我是AngularJS的新手,我想设计菜单和子菜单,如下图所示- 我已经用AngularJS创建了菜单,如下图所示- 也添加了相同的代码 以下是此菜单的HTML页面-- 和控制器 ----------------------------------JS---------------- 控制器(“menuController”,函数($scope,$http){ 但我面临的问题是如何显示第一张图片中突出显示的子菜单区域。我不知道如何获得子菜单的左上角和右上角 谁能帮帮我吗 提前非常感谢…我想
但我面临的问题是如何显示第一张图片中突出显示的子菜单区域。我不知道如何获得子菜单的左上角和右上角 谁能帮帮我吗
提前非常感谢…我想你可以通过CSS来实现,如果在子菜单UL上应用一些样式,应该是可行的。也许以下内容可以帮助你:
#nav1 ul ul ul {position: absolute; top: 40px; left: 0; width: 100%; background-color:#F9F9F9;}
如果你能在某个地方分享你的代码,那就太好了
关于谢谢你的帮助,我在下面的位置添加了代码,请看一下。这是我第一次在JSFIDLE中添加代码,我试图解决这个问题,因为它在那里不起作用。Ashok,你必须更改并插入不同的CSS规则。添加了一些彩色背景,以帮助识别e不同的元素。你可以在这里看到更新:当你在不同的菜单级别中插入更多链接时,可能需要一些更新。谢谢Estefano,我已经从你提供的链接中更新了代码,现在你可以在输出窗口中看到UI。现在的问题就像我想在菜单选项卡下看到扩展的子菜单,它将从Fir开始st菜单到最后一个手动菜单(这是它的宽度和起点)。我无法确定它的起点。左边不应该是0px。它应该是“主”菜单的左下角,每个子菜单都应该从这里开始。
#wrapper1
{
width: auto;
margin: 10px;
text-align: left;
}
#nav1 div {color:Red; margin:10px;}
#nav1 ul{list-style-type:none; padding:0; margin:0; }
#nav1 ul li {display:inline-block; background-color:#E0E0E0; min-width:150px;}
#nav1 ul li
{
background-image:linear-gradient(to bottom, #ffffff, #eaeaea);
background-repeat: repeat-x;
border-bottom: 1px solid #d1d1d1;
border-top: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
border-right: 1px solid #eaeaea;
}
#nav1 ul li:hover{background-color:#FFF; }
#nav1 ul li:hover{ background-image:linear-gradient(to bottom, #eaeaea, #ffffff);
background-repeat: repeat-x;
border-bottom: 1px solid #eaeaea;
border-top: 1px solid #d1d1d1;
border-left: 1px solid #eaeaea;
border-right: 1px solid #eaeaea;
}
#nav1 ul li:hover > a
{
border-bottom-color:#FFF;
outline:0;
text-decoration:none;
border-top:solid 2px #1971c4;
padding-top:12px;
color:#1971c4;
}
#nav1 ul ul li:hover > a
{
border-top: 1px solid #eaeaea;
}
#nav1 ul li.has-children > a:after {
content: "";
background: url("http://www.cmegroup.com/etc/designs/cmegroup/cmegroupClientLibs/images/cme-header-sprite.png") no-repeat;
width: 8px;
height: 8px;
display: inline-block;
margin-left:5px;
}
#nav1 ul li a,visited{display:block; padding:15px; color:#888; text-decoration:none;}
#nav1 ul li:hover > ul{display:block;}
#nav1 ul li a:hover{color:#444;}
#nav1 > ul li:hover a{color:#444;}
#nav1 ul ul li{display:block;}
#nav1 ul ul{position:absolute; background-color:#FFF; min-width:225px;}
#nav1 ul ul li:hover{background-color:#F9F9F9;}
#nav1 ul li:hover ul li a,visited{color:#888;}
#nav1 ul ul li:hover ul{display:block;}
#nav1 ul ul ul {margin: -47px 0 0 224px; background-color:#F9F9F9;}
#nav1 ul ul ul li a:hover{color:#444;}
#nav1 {vertical-align:middle; text-align:center;}
$scope.menus = [
{
title: "Menu #1",
action: "#"
},
{
title: "Menu #2",
action: "#",
menus: [
{
title: "SubMenu #1",
action: "#"
},
{
title: "SubMenu #2",
action: "#"
},
{
title: "SubMenu #3",
action: "#"
},
{
title: "SubMenu #4",
action: "#"
}
]
},
{
title: "Menu #3",
action: "#",
menus: [
{
title: "SubMenu #1",
action: "#",
menus: [
{
title: "Sub-SubMenu #1",
action: "#"
},
{
title: "Sub-SubMenu #2",
action: "#"
}
]
}
]
},{
title: "Menu #4",
action: "#",
menus: [
{
title: "SubMenu #1",
action: "#",
menus: [
{
title: "Sub-SubMenu #1",
action: "#"
},
{
title: "Sub-SubMenu #2",
action: "#"
}
]}]},{
title: "Menu #5",
action: "#",
menus: [
{
title: "SubMenu #1",
action: "#"
},
{
title: "SubMenu #2",
action: "#"
}
]}];});
#nav1 ul ul ul {position: absolute; top: 40px; left: 0; width: 100%; background-color:#F9F9F9;}