您的位置：首页 > Web前端 > > 正文

css3导航菜单（CSS3实现的侧滑菜单）

更多时间：2021-10-24 10:22:21 类别：Web前端浏览量：2048

css3导航菜单

CSS3实现的侧滑菜单实现效果：

实现代码：

<!DOCTYPE html><html class="menu">
<html>

<head>

<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
<meta name="google" value="notranslate"/>
<title>Side Menu</title>

<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">


  
 



</head>
<body>



</li><nav class="main-menu">


  
 <li>
    <a class="logo" href="http://startific.com">
    </a> 
  </li> 
<li class="settings"></li>
<li class="scrollbar" id="style-1">
      
<ul>
  
<li>                                   
<a href="http://startific.com">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>   
   
<li>                                 
<a href="http://startific.com">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>   

    
<li>                                 
<a href="http://startific.com">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>   
  


 
<li>
<a href="http://startific.com">
<i class="fa fa-heart-o fa-lg"></i>
                        
<span class="share"> 


<li class="addthis_default_style addthis_32x32_style">
  
<li style="position:absolute;
margin-left: 56px;top:3px;"> 
   
  

  
 <a href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank" class="share-popup"><img src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.jpg" alt="css3导航菜单（CSS3实现的侧滑菜单）" border="0" />

CSS3

body
{
  margin:0px;
  padding:0px;
	font-family: "Open Sans", arial;
	background:url('https://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg" alt="css3导航菜单（CSS3实现的侧滑菜单）" border="0" />

以上就是CSS3实现的侧滑菜单的详细内容，更多关于CSS3 侧滑菜单的资料请关注开心学习网其它相关文章！

标签：CSS3 侧滑菜单

上一篇：python提供的四种基本数据类型（浅谈python的输入输出，注释，基本数据类型）

下一篇：apache服务器设置301（Apache Rewrite实现URL的301跳转和域名跳转）

您可能感兴趣

css3导航菜单（CSS3实现的侧滑菜单）

css3导航菜单

热门推荐

排行榜