i have bootstrap accordion works should, need further functionality need expert with.
currently when viewed, first parent link , sublinks collapsed visible, until user selects parent link collapse sublinks, , on.
this fine, further functionality, wish include following:
parent links page links well? - wish parent link act pages themselves, not href anchor link collapse up/down accordion function, these parent links pages, i.e account.html, media.html, privacy.html, etc. there way use jquery input pages within second column col-md-12 using accordion tab navigation such have? im not sure how go this, suggestion code help...
sublink functionality - sublinks act anchor links within parent link page point specific sections, because include long forms , provide lot of content easy navigation.
for parent , sublink states - parent link , sublinks should have black background , text white state being active, while unselected parent links should have white background , text should black not active. when hover on of links, orange.
i thinking ensure parent links actual pages themselves, need use jquery? im not sure, unless done without it, great.
i need responsive , work properly. hope have made sense in explaining how work, if not please ask me questions clarify.
here image well: enter image description here
thanks people, greatest...
i have provided html , css have:
<div class="container"> <div class="row"> <div class="col-md-2 sidebar"> <div class="panel-group" id="accordion"> <div class="panel panel-default custom"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseone"> account </a> </h4> </div> <div id="collapseone" class="panel-collapse collapse in"> <div class="panel-body"> <ul class="list-unstyled"> <li><a href=""> link</a> <li><a href=""> link</a> </ul> </div> </div> </div> <div class="panel panel-default custom"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapsethree"> link </a> </h4> </div> <div id="collapsethree" class="panel-collapse collapse"> <div class="panel-body"> <ul class="list-unstyled"> <li><a href=""> link</a> <li><a href=""> link</a> <li><a href=""> link</a> <li><a href=""> link</a> <li><a href=""> link</a> </ul> </div> </div> </div> <div class="panel panel-default custom"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapsefour"> media </a> </h4> </div> <div id="collapsefour" class="panel-collapse collapse"> <div class="panel-body"> <ul class="list-unstyled"> <li><a href=""> photos</a> <li><a href=""> videos</a> </ul> </div> </div> </div> <div class="panel panel-default custom"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapsefive"> privacy </a> </h4> </div> </div> </div> <!-- end of sidebar --> </div> <!-- end of row --> <div class="col-md-10"> <div class="row"> <h2>heading</h2> <h3>heading</h3> <div class="form-inline form-details" role="form" action="/profiledetails" method="post"> <div class="form-group"> </div> </div> </div> </div> </div> <!-- end of container --> .container { background-color: #1f1f1f;} .row.header{ color: #fff; border-bottom: 6px solid #fff } .row.header h1 { padding: 30px 0; font-size: 3em; font-weight:100; } .row.main-content { border-left: 6px solid #aaa;} /* ****** navigation sidebar ******** ********************************** */ .col-md-2.sidebar { padding: 0; } .panel {border-radius: 0 !important; border: 0; font-family: 'lato', arial, sans-serif; font-weight: 400} .panel-group {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff} .panel-heading h4.panel-title {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;} .panel-heading h4.panel-title a:link { margin-left: 10px; text-decoration: none; font-weight: bold; font-size: 20px} .panel-heading h4.panel-title a:active {color: #fff } .panel-heading h4.panel-title a:hover {color: #f47929} .panel-group .panel+.panel {margin-top: 0px !important; border-top: 1px solid #ccc} .panel.panel-default.custom .panel-heading { background: #fff; color: #000; border-color: #fff } .panel-body {//padding-top: 2px !important; //padding-bottom: 0px !important; padding: 0px !important; border: 0 } .panel-body ul { margin: 0; padding: 0 } .panel-body ul li { padding: 15px 0 !important; border-bottom: 1px solid #ccc; font-size: 14px} .panel-body ul li:last-child {border-bottom: 0} .panel-body ul a.btn-block>a { color: #f47929} .panel-body ul li a:link { margin-left: 40px !important; color: #4d4d4d} .panel-body ul li a:active {color: #fff} .panel-body ul li a:hover {text-decoration: none; color: #f47929 } #collapseone.panel-collapse, #collapsetwo.panel-collapse, #collapsethree.panel-collapse { border: 0 !important; padding: 0} .panel-heading.collapsed { background-color: #222222}
Comments
Post a Comment