-
在你介绍了几个导航菜单，我们要给你一个纯CSS3圆形的导航菜单，导航是新鲜的，列表图标在中间，当列表图标点击，它们分布在表图。形成一个环，结果如下：
实现的代码。
HTML代码：
复制代码代码如下所示：
冷静打开/关闭菜单在完整的CSS
CSS代码：
{代码}主体
{
背景：# 34495e；
}
容器。
{
宽度：550px；
显示块；
保证金：汽车；
职位：相对；
}
H1
{
文本对齐：中心；
字体家庭：'roboto，sans serif；
字体重量：400；
颜色：# f1c40f；
}
menu_opener。
{
显示：无；
}
。menu_opener：~ link_one检查。
{
上图：65px；
}
。menu_opener：~ link_two检查。
{
左：385px；
}
。menu_opener：~ link_three检查。
{
上图：385px；
}
。menu_opener：~ link_four检查。
{
左：65px；
}
。menu_opener：~ barre_hamburger检查。
{
不透明性：0；
}
。menu_opener：~ menu_opener_label：后检查。
{
变换：旋转（45deg）；
上图：70px；
}
。menu_opener：~ menu_opener_label：前检查。
{
变换：旋转（45度）；
上图：70px；
}
menu_opener_label。
{
背景：# f1c40f；
宽度：150px；
身高：150px；
显示块；
光标：指针；
边框半径：50%；
位置：绝对；
上图：200px；
左：200px；
Z指数：10；
}
menu_opener_label：后。
{
位置：绝对；
上图：50px；
左：50px；
背景：# 000；
内容：；
宽度：50px；
身高：10px；
WebKit的过渡：所有0.4s缓解；
过渡：所有的0.4s缓解；
}
menu_opener_label：之前。
{
位置：绝对；
上图：90px；
左：50px；
背景：# 000；
内容：；
宽度：50px；
身高：10px；
WebKit的过渡：所有0.4s缓解；
过渡：所有的0.4s缓解；
}
barre_hamburger。
{
宽度：50px；
身高：10px；
位置：绝对；
上图：270px；
左：250px；
背景：# 000；
Z指数：20；
WebKit的过渡：所有0.4s缓解；
过渡：所有的0.4s缓解；
}
link_general。
{
宽度：100px；
身高：100px；
显示块；
边框半径：50%；
位置：绝对；
上图：225px；
左：225px；
背景：# ecf0f1；
WebKit的过渡：所有0.4s缓解；
过渡：所有的0.4s缓解；
}
link_one。
{
背景：URL（回家。png）# f1c40f没有重复中心；
}
link_two。
{
背景：URL（的邮件。png）# f1c40f没有重复中心；
}
link_three。
{
背景：URL（集。png）# f1c40f没有重复中心；
}
link_four。
{
背景：URL（开始。png）# f1c40f没有重复中心；
}代码}