Javascript 使用jQuery和CSS的自定义菜单

我试图创建一个侧边栏菜单，但我不确定从哪里开始

我需要它如何工作在下图中，当单击主导航链接1时，它将从右侧滑入与该选择相关联的子导航项目。显然，主导航链路2也有自己的选项，链路3可能没有子导航项目

提前感谢您的帮助

以下是我目前掌握的情况：

$（“.primary导航框”）。单击（功能（e）{
e、 预防默认值（）；
$（'.primary nav'）.addClass（'hidden-xs-up'））
$（'.secondary nav'）.removeClass（'hidden-xs-up'）；
});
$（“.back btn”）。单击（函数（e）{
e、 预防默认值（）；
$（'.secondary nav'）.addClass（'hidden-xs-up'）；
$（'.primary nav'）.removeClass（'hidden-xs-up'）；
});
。侧栏{
背景色：#434a54；
高度：500px；
宽度：120px；
保证金：60像素自动；
盒影：0.40px 0 rgba（0,0,0,0.2）；
}
.侧边栏.框{
颜色：#aab2bd；
显示：块；
文本对齐：居中；
边框底部：1px实心#656d78；
填充：20px 10px；
文字装饰：无！重要；
过渡：.2s；
}
.侧边栏.框：悬停{
背景色：#4a89dc；
颜色：#f5f7fa；
}
.侧栏.导航图标{
字体大小：30px；
显示：块；
边缘底部：5px；
}
.侧边栏.返回btn{
背景色：#4a89dc；
颜色：#f5f7fa；
}
这不是最好的解决方案，但在悬停时，您可以隐藏、移动，。。。具有CSS的DOM中的元素，如：
[


正文{
字体系列：Arial；
填充：40px；
}
保险商实验室{
列表样式：无；
填充：0；
保证金：0；
位置：相对位置；
宽度：60px；
}
ul子菜单{
不透明度：0；
位置：绝对位置；
排名：0；
左：120px；
过渡：所有400ms缓进缓出；
}
ulli{
边框顶部：1px纯白；
}
ullia{
显示：块；
背景色：#434a54；
文本对齐：居中；
颜色：白色；
文字装饰：无；
填充：20px0；
}
ul li：悬停。子菜单{
不透明度：1；
左：61px；
}






























根据您的代码，在不更改标记的情况下，我有一些建议，可以简化您在动画中的幻灯片：


使用辅助导航的位置
绝对

使用类和变换来制作幻灯片动画
使用主按钮中的引用以右辅助元素为目标


$（“.primary导航框”）。单击（功能（e）{
e、 预防默认值（）；
var targ=$（this.attr（'href'）；
$（target）.addClass（'showsub'）；
});
$（“.back btn”）。单击（函数（e）{
e、 预防默认值（）；
$（'.secondary nav'）.removeClass（'showsub'）；
})；
。侧栏{
位置：相对位置；
背景色：#434a54；
高度：500px；
宽度：120px；
保证金：60像素自动；
溢出：隐藏；
盒影：0.40px 0 rgba（0,0,0,0.2）；
}
.侧边栏.框{
颜色：#aab2bd；
显示：块；
文本对齐：居中；
边框底部：1px实心#656d78；
填充：20px 10px；
文字装饰：无！重要；
过渡：.2s；
}
.侧边栏.框：悬停{
背景色：#4a89dc；
颜色：#f5f7fa；
}
.侧栏.导航图标{
字体大小：30px；
显示：块；
边缘底部：5px；
}
.侧边栏.返回btn{
背景色：#4a89dc；
颜色：#f5f7fa；
}
.辅助导航{
位置：绝对位置；
z指数：10；
左：100%；
排名：0；
宽度：100%；
背景色：#434a54；
过渡：左。2s线性；
}
.二级-nav.showsub{
左：0；
}

那么你尝试过什么？有什么代码可以显示吗？请发布你尝试过的代码。如果还没有尝试，我建议你搜索
垂直导航栏开始。问题太广泛了。要获得灵感，请访问jqueryscript这样的网站。net@SamirChahine添加了简短的代码，减去幻灯片的效果，我不知道在哪里首先。我想它需要在与内容滑块类似的wade中工作。@Pugazh代码添加了。如果有第三个导航，当您单击辅助导航中的链接时会显示该导航，您会怎么做？当您单击第三个导航中的“后退”按钮时，它也会返回到辅助导航。