css - Attach vertical menu to segment using Semantic UI -
how possible attach vertical menu segment using semantic-ui css framework? when using markup presented in documentation there margin (resulting form grid padding) between content , menu. if not using grid borders don't fit.
<div class="ui grid"> <div class="row"> <div class="sixteen wide column"> <!-- overlapping border --> <div class="ui horizontal segments"> <div class="ui vertical tabular menu"> <a class="active item">bio</a> <a class="item">pics</a> <a class="item">companies</a> <a class="item">links</a> </div> <div class="ui segment"> stretched grid column. segment match tab height </div> </div> </div> </div> <div class="row"> <!-- margin between elements --> <div class="four wide column"> <div class="ui vertical fluid tabular menu"> <a class="active item">bio</a> <a class="item">pics</a> <a class="item">companies</a> <a class="item">links</a> </div> </div> <div class="twelve wide stretched column"> <div class="ui segment"> stretched grid column. segment match tab height </div> </div> </div> <div class="row"> <!-- margin between elements --> <div class="four wide column"> <div class="ui vertical fluid menu"> <a class="active item">bio</a> <a class="item">pics</a> <a class="item">companies</a> <a class="item">links</a> </div> </div> <div class="twelve wide stretched column"> <div class="ui segment"> stretched grid column. segment match tab height </div> </div> </div> <div class="row"> <div class="sixteen wide column"> <!-- overlapping border --> <div class="ui horizontal segments"> <div class="ui vertical menu"> <a class="active item">bio</a> <a class="item">pics</a> <a class="item">companies</a> <a class="item">links</a> </div> <div class="ui segment"> stretched grid column. segment match tab height </div> </div> </div> </div> </div>
i expect vertical menu attached segment (like when using horizontal menus).
i think can make small overriding css class amend few things in default grid ui
, menu
classes make want. here code sample first grid ui example: http://codepen.io/nasir_t/pen/doggro
Comments
Post a Comment