我一直在研究如何在我的主頁上創建一個半圓邊欄。 有沒有一種方法可以像使用bootstrap的例子一樣創建設計? 任何幫助表示讚賞。提前致謝。使用CSS創建Half Circle Bootstrap Sidebar菜單是否可行?
0
A
回答
0
邊界半徑:100%;
然後,您將需要將內容嵌套在帶有填充左側的div中,並將包含div位置的負位置留在頁面上。
您可能還需要在容器中使用overflow:hidden。
這是一個基本的首發只用普通的舊引導導航:
https://jsfiddle.net/jeremykenedy/mqhcaz75/1/
CSS:
body {
background: #163040;
color: #ffffff;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 150px;
}
#sidebar-wrapper {
position: fixed;
left: 224px;
z-index: 1000;
overflow-y: auto;
margin-left: -345px;
width: 0;
height: 100%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-radius: 0 50% 50% 0;
height: 249px;
overflow: hidden;
top: 20%;
box-shadow: inset -1px 0px 100px 2px rgba(0, 0, 0, .4), 1px 0px 100px 1px rgba(255, 255, 255, .02);
}
#wrapper.toggled #sidebar-wrapper {
width: 240px;
}
#page-content-wrapper {
padding: 15px;
width: 100%;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 22px;
margin: 0;
padding: 0;
width: 234px;
list-style: none;
padding-left: 128px;
}
.sidebar-nav li {
line-height: 40px;
margin-left: 20px;
}
.sidebar-nav li a {
display: block;
width: 246%;
margin-left: -30px;
padding-left: 37px;
}
.sidebar-nav li:nth-child(1) a {} .sidebar-nav li:nth-child(2) a {
padding-left: 62px;
}
.sidebar-nav li:nth-child(3) a {
padding-left: 72px;
}
.sidebar-nav li:nth-child(4) a {
padding-left: 62px;
}
.sidebar-nav li:nth-child(5) a {} .sidebar-nav li a {
display: block;
color: #999999;
text-decoration: none;
}
.sidebar-nav li a:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
background: none;
color: #fff;
}
@media (min-width: 768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#menu-toggle" id="menu-toggle"><span aria-hidden="true" class="glyphicon glyphicon-list"></span></a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-home"></span> Home</a>
</li>
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-question-sign"></span> Messages</a>
</li>
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-question-sign"></span> Help</a>
</li>
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-off"></span> Log Out</a>
</li>
</ul>
<form action="#" class="navbar-form navbar-right" method="get">
<div class="input-group">
<input class="form-control" id="query" name="search" placeholder="Search..." type="text" value="">
<div class="input-group-btn">
<button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
</div>
</nav>
<div class="toggled" id="wrapper">
<div class="container-fluid">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-calendar"></span></a>
</li>
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-time"></span></a>
</li>
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-dashboard"></span></a>
</li>
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-user"></span></a>
</li>
<li>
<a href="#"><span aria-hidden="true" class="glyphicon glyphicon-cog"></span></a>
</li>
</ul>
</div><!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid"></div>
</div><!-- /#page-content-wrapper -->
</div>
</div>
+0
感謝有用的建議 – Paul
+0
這不是太糟糕! – 2017-08-24 04:36:07
相關問題
- 1. Bootstrap Sidebar
- 2. 創建CSS菜單
- 3. SVG Half Circle:爲什麼旋轉?
- 4. 用css創建子菜單
- 5. Bootstrap(half)xs col's?
- 6. Silverstripe Bootstrap Accordion Sidebar
- 7. 使用在創建CSS菜單類
- 8. 使用css創建垂直菜單
- 9. 創建靜態菜單CSS
- 10. 在css和bootstrap菜單中的兩行
- 11. Bootstrap響應式菜單2000行CSS
- 12. 是否可以使用Twitter Bootstrap創建Magento網站?
- 13. jquery:是否可以使用devexpress進行自定義菜單?
- 14. 如何使用css bootstrap list-group with affix在列中創建粘性菜單?
- 15. Responsive circle image bootstrap
- 16. 使用單個命令創建兩個對象是否可行?
- 17. 是否可以通過下拉CSS菜單運行js函數?
- 18. 使用Bootstrap進行菜單定位
- 19. 使用MvcSiteMapProvider創建菜單
- 20. 如何使用bootstrap創建自動完成下拉菜單?
- 21. 是否可以使用谷歌地圖創建菜單(內容選擇)?
- 22. 使用jQuery和CSS創建簡單的下拉菜單
- 23. Sticky Bootstrap Sidebar沿右邊距創建空隙
- 24. 我可以用html和css創建菜單模板嗎
- 25. Bootstrap下拉菜單
- 26. 是否可以使用angular-cli構建單獨的CSS文件?
- 27. 這個菜單圖標是如何用CSS創建的?
- 28. 如何使用CSS創建具有垂直子菜單的水平HTML菜單?
- 29. 如何創建CSS滑動菜單?
- 30. 如何創建滾動的菜單? CSS
是的,它是可能的,但不「只知道CSS基礎知識」的人。您可能想在這裏提問之前進行搜索,如[問]中所述。 –