javascript - Better approach for User Profile bar -
i stuck small issue here. have used mark-up this:
snippet
$(function () { $(".more-options").click(function () { $(this).closest(".user-profile").toggleclass("open"); return false; }); });/* reset */ * {margin: 0; padding: 0; list-style: none; font-size: 12pt;} {text-decoration: none;} /* main css */ .user-profile {border: 1px solid #999; overflow: hidden; position: relative; margin: 25px 0;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; float: left;} .user-profile p:first-child {margin: 3px 0 0;} .user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;} .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff;} .user-profile .more-options-list li, .user-profile .more-options-list li {display: block;} .user-profile .more-options-list li {padding: 5px;} .user-profile.open .more-options-list {display: block;} .user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;} /* testing sizes */ .user-profile.default {width: 250px;} .user-profile.mobile {width: auto;} .user-profile.large {width: 500px;} .user-profile.small {width: 100px;} /* background image, can ignored. */ .user-profile .more-options {background-image: url("data:image/png;base64,ivborw0kggoaaaansuheugaaabeaaaalcayaaaczigyhaaaejgldq1bjq0mguhjvzmlszqaaobgfvd9v21qupolvuqqwpybyr4ekxa9vu1u5gxqtxgzjk6xtshal6dgqjoq6n4mpgwfb6baqt3ubnwb8audzaw9ipcenbmj72fbatelthyqqsuh76mqpisbtbvxhu3zij1pexpx6yznfoec7517brd1fabwagvwilquunc8klzonfpsetyrss9rla9sr6u4tkcvnei7bfffo6+edigjl7zhu/k72i796i9zrisjpwg4vhx0z+axrznrrtksuvwf7+gm3btzzhpdtngqcqwkxfzwsenhhjz1oit8jjtaq6xwtclwgplzyzi+3yv8dgmit4vvug7oizpgzrzjhcs/hl49xtzh/dy6bdftsxyny+5yluwo4d4nek/zuvok/17x0hpblsf+vuulhfwx4j/rsfaj4h1h0qzj9dn7nr19frrtebt4fe9fwpwtn+2p1mxscglhr9sxrmmgjond1zxkzpbea71b4tnhj6jgoyfnp4ghgwup9qplfmnfw5otdy7namcwci49kv6fn5iahgd+0rbyobc3sojczohbys1drbq6pqdqumllrc/0ymttej8gpbbuvwpqfyw66dqezyxzkxthpjn+tznpnedrybbuef9qqn93s7hqgghnyp7w6l+yghntd1fjitqpar+hercnofi1i1alko6rqnjkuxl1gnjwlmsiehcplyteit9isbn15oy/jx4smshe9lajrptvhr3c/ybfyp1pzafwfyrpsmbtne6swn9ib7ahlwtrbdgukcm06fsrtfsj187xpdvqwok5q8vxafsiiuc7z7xr6zy/+hpqwsyv0i0/qmtrb7rmgbxnodtfspqdraz/sdjzkbrv4zu2+a2t0/hhzjd2lbcc2sg7gtsl42k+xlfxtugi7yhqklqhk8hbccxgjht1cadmldetv4fnq2llasaol6vmb0cmmwt/ipszsuehqqv6i/qluqf+of9tfo2qegtumjh0qfsv9kh0nfs/9tip0wboi/srdlb6rlgu5u++9nyxye69fyrpdil1o1wufnsdttsp75bfllpy8/li8g7auuv8ek6fkvfdscfbndp0dvrh0crnqtbv7lfeegdqpjqadbtfgvmweq3qwwdufk6zsnsjg2pqjp3zcnowwing6noonsinvi0/ex+izareevphe+cawpgp1/pmtmdo64g0stcxim+kdonfwrfqkdjvqzv1+bt8ookmrdty2yhvx2a+qrykjfmq4ml3vr4cvztqvz+uonne4vckloys+gyko6ehe+75fdt0mbe5brif/wjvrvmhbqbn97rd1vxrahvbofoyzoosh9bq94uejsoqgkvm6sn/7hell4t10t9f4gpdvzydeox83gv+unxo7xyl/ftfl8z9zahf4bbsrewaaaalwsflzaaalewaacxmbajqcgaaaaxfpvfh0we1momnvbs5hzg9izs54bxaaaaaaadx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ilhnucbdb3jlidqunc4wij4kicagphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4kicagicagphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiikicagicagicagicageg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavij4kicagicagicagphhtcdpdcmvhdg9yvg9vbd5bzg9izsbqag90b3nob3agq1m2ichxaw5kb3dzktwveg1woknyzwf0b3jub29spgogicagica8l3jkzjpezxnjcmlwdglvbj4kicagpc9yzgy6ukrgpgo8l3g6eg1wbwv0yt4kq+u4tgaaavnjrefukbv9kt9lw1auxfneuxdc1n2cq0kndhqubq46k4izg4pglughecdf6qbtcdjnxnffvmq6lbtqix4bf5ci0cbflb1satilyb33vhpo+3nnmqao53nvqqfqdrznpdlsppbhhu/7i91ud85a+wg/njvkzrtftvwyxsrxvbnf0zdimomgklj2tc8aiw9jziayvnnmc6kb0rs7rbxb7uixcrk8xwmvec0rjhluw/irdojsq5xh8mogq9lpeq7rpg8b9lnjlujimoyyalvb6jynnqhnmjiy4amb4edcgnacmjzfzmestlthgnz6jkjiqguyxpovpb8vid+yzdqtureexkcxrvarwwjac9eh8lliey2pgzd+tqiktmk53j6gb1irlhnsnkmszu6n8zmi/zprrqaygqio0wtf4jdt7oh9kedzrokqekcsjpeuzzxgxuxd+rcr85ayrbgq7aaaaabjru5erkjggg==");}<script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="user-profile default"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>username</strong></a></p> <p><span>designation</span></p> </div> <a href="#" class="more-options">more options</a> <ul class="more-options-list"> <li><a href="#">profile</a></li> <li><a href="#">settings</a></li> <li><a href="#">log out</a></li> </ul> </div> <div class="user-profile mobile"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>username</strong></a></p> <p><span>designation</span></p> </div> <a href="#" class="more-options">more options</a> <ul class="more-options-list"> <li><a href="#">profile</a></li> <li><a href="#">settings</a></li> <li><a href="#">log out</a></li> </ul> </div> <div class="user-profile large"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>username</strong></a></p> <p><span>designation</span></p> </div> <a href="#" class="more-options">more options</a> <ul class="more-options-list"> <li><a href="#">profile</a></li> <li><a href="#">settings</a></li> <li><a href="#">log out</a></li> </ul> </div> <div class="user-profile small"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>username</strong></a></p> <p><span>designation</span></p> </div> <a href="#" class="more-options">more options</a> <ul class="more-options-list"> <li><a href="#">profile</a></li> <li><a href="#">settings</a></li> <li><a href="#">log out</a></li> </ul> </div>problem
i trying design user profile bar, when live, should way:
this trying achieve here, when button clicked. , happens is, menu doesn't displayed, because have used overflow: hidden; clear floats. menu hidden inside.
i responsive (well, using percentages of width in different screen resolutions , instances), them display way:
is there better way achieve it? not sure how make ellipsis show, if size small, see mobile class in snippet.
preview
for those, cannot preview snippet, display way:
default view.
arrow has been clicked.
you need use positioning case. case of fixed-fluid model:
+-------+-----------+ | fixed | fluuuuuid | +-------+-----------+ or
+-------+-----------+ | fixed | fluuuuuid | | | fluuuuuid | +-------+-----------+ to tackle this, need make fixed content positioned absolute , guess, being fixed content, surely know dimensions. , give parent position: relative , padding-left , min-height of dimensions. should never use overflow: hidden or floats in case. remove both css , make these changes:
.user-profile {border: 1px solid #999; position: relative; margin: 25px 0;} /* remove overflow: hidden; */ .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px;} /* remove float: left; */ instead, said before, add padding, min-height parent , position: absolute child:
.user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;} the mysterious 68px:
the 68px calculated way:
- left margin:
5px - left border:
1px - left padding:
3px - width:
50px - right padding:
3px - right margin:
1px - right border:
5px
so, 5px + 1px + 3px + 50px + 3px + 1px + 5px = 68px.
text ellipsis
for ellipsis work on major browsers, can use following code:
(selector) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } just add .user-profile p rule:
.user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} also, better have z-index in place position: absolute items work other similar items. please add:
.user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;} so, final code be:
$(function () { $(".more-options").click(function () { $(this).closest(".user-profile").toggleclass("open"); return false; }); });/* reset */ * {margin: 0; padding: 0; list-style: none; font-size: 12pt;} {text-decoration: none;} /* main css */ .user-profile {border: 1px solid #999; position: relative; margin: 25px 0; padding-left: 68px; min-height: 68px;} .user-profile .user-thumb {border: 1px solid #999; margin: 5px; padding: 3px; border-radius: 3px; position: absolute; top: 0; left: 0;} .user-profile p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .user-profile p:first-child {margin: 3px 0 0;} .user-profile .more-options {position: absolute; right: 0; top: 0; height: 100%; width: 30px; background: center center no-repeat #ccc; text-indent: -99px; overflow: hidden;} .user-profile .more-options-list {position: absolute; right: 0; top: 70px; border: 1px solid #999; width: 100px; display: none; background-color: #fff; z-index: 1;} .user-profile .more-options-list li, .user-profile .more-options-list li {display: block;} .user-profile .more-options-list li {padding: 5px;} .user-profile.open .more-options-list {display: block;} .user-profile.open .more-options, .user-profile .more-options:hover {background-color: #999;} /* testing sizes */ .user-profile.default {width: 250px;} .user-profile.mobile {width: auto;} .user-profile.large {width: 500px;} .user-profile.small {width: 100px;} /* background image, can ignored. */ .user-profile .more-options {background-image: url("data:image/png;base64,ivborw0kggoaaaansuheugaaabeaaaalcayaaaczigyhaaaejgldq1bjq0mguhjvzmlszqaaobgfvd9v21qupolvuqqwpybyr4ekxa9vu1u5gxqtxgzjk6xtshal6dgqjoq6n4mpgwfb6baqt3ubnwb8audzaw9ipcenbmj72fbatelthyqqsuh76mqpisbtbvxhu3zij1pexpx6yznfoec7517brd1fabwagvwilquunc8klzonfpsetyrss9rla9sr6u4tkcvnei7bfffo6+edigjl7zhu/k72i796i9zrisjpwg4vhx0z+axrznrrtksuvwf7+gm3btzzhpdtngqcqwkxfzwsenhhjz1oit8jjtaq6xwtclwgplzyzi+3yv8dgmit4vvug7oizpgzrzjhcs/hl49xtzh/dy6bdftsxyny+5yluwo4d4nek/zuvok/17x0hpblsf+vuulhfwx4j/rsfaj4h1h0qzj9dn7nr19frrtebt4fe9fwpwtn+2p1mxscglhr9sxrmmgjond1zxkzpbea71b4tnhj6jgoyfnp4ghgwup9qplfmnfw5otdy7namcwci49kv6fn5iahgd+0rbyobc3sojczohbys1drbq6pqdqumllrc/0ymttej8gpbbuvwpqfyw66dqezyxzkxthpjn+tznpnedrybbuef9qqn93s7hqgghnyp7w6l+yghntd1fjitqpar+hercnofi1i1alko6rqnjkuxl1gnjwlmsiehcplyteit9isbn15oy/jx4smshe9lajrptvhr3c/ybfyp1pzafwfyrpsmbtne6swn9ib7ahlwtrbdgukcm06fsrtfsj187xpdvqwok5q8vxafsiiuc7z7xr6zy/+hpqwsyv0i0/qmtrb7rmgbxnodtfspqdraz/sdjzkbrv4zu2+a2t0/hhzjd2lbcc2sg7gtsl42k+xlfxtugi7yhqklqhk8hbccxgjht1cadmldetv4fnq2llasaol6vmb0cmmwt/ipszsuehqqv6i/qluqf+of9tfo2qegtumjh0qfsv9kh0nfs/9tip0wboi/srdlb6rlgu5u++9nyxye69fyrpdil1o1wufnsdttsp75bfllpy8/li8g7auuv8ek6fkvfdscfbndp0dvrh0crnqtbv7lfeegdqpjqadbtfgvmweq3qwwdufk6zsnsjg2pqjp3zcnowwing6noonsinvi0/ex+izareevphe+cawpgp1/pmtmdo64g0stcxim+kdonfwrfqkdjvqzv1+bt8ookmrdty2yhvx2a+qrykjfmq4ml3vr4cvztqvz+uonne4vckloys+gyko6ehe+75fdt0mbe5brif/wjvrvmhbqbn97rd1vxrahvbofoyzoosh9bq94uejsoqgkvm6sn/7hell4t10t9f4gpdvzydeox83gv+unxo7xyl/ftfl8z9zahf4bbsrewaaaalwsflzaaalewaacxmbajqcgaaaaxfpvfh0we1momnvbs5hzg9izs54bxaaaaaaadx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ilhnucbdb3jlidqunc4wij4kicagphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4kicagicagphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiikicagicagicagicageg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljavij4kicagicagicagphhtcdpdcmvhdg9yvg9vbd5bzg9izsbqag90b3nob3agq1m2ichxaw5kb3dzktwveg1woknyzwf0b3jub29spgogicagica8l3jkzjpezxnjcmlwdglvbj4kicagpc9yzgy6ukrgpgo8l3g6eg1wbwv0yt4kq+u4tgaaavnjrefukbv9kt9lw1auxfneuxdc1n2cq0kndhqubq46k4izg4pglughecdf6qbtcdjnxnffvmq6lbtqix4bf5ci0cbflb1satilyb33vhpo+3nnmqao53nvqqfqdrznpdlsppbhhu/7i91ud85a+wg/njvkzrtftvwyxsrxvbnf0zdimomgklj2tc8aiw9jziayvnnmc6kb0rs7rbxb7uixcrk8xwmvec0rjhluw/irdojsq5xh8mogq9lpeq7rpg8b9lnjlujimoyyalvb6jynnqhnmjiy4amb4edcgnacmjzfzmestlthgnz6jkjiqguyxpovpb8vid+yzdqtureexkcxrvarwwjac9eh8lliey2pgzd+tqiktmk53j6gb1irlhnsnkmszu6n8zmi/zprrqaygqio0wtf4jdt7oh9kedzrokqekcsjpeuzzxgxuxd+rcr85ayrbgq7aaaaabjru5erkjggg==");}<script src="https://code.jquery.com/jquery-1.9.1.js"></script> <div class="user-profile default"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>username</strong></a></p> <p><span>designation</span></p> </div> <a href="#" class="more-options">more options</a> <ul class="more-options-list"> <li><a href="#">profile</a></li> <li><a href="#">settings</a></li> <li><a href="#">log out</a></li> </ul> </div> <div class="user-profile mobile"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>username</strong></a></p> <p><span>designation</span></p> </div> <a href="#" class="more-options">more options</a> <ul class="more-options-list"> <li><a href="#">profile</a></li> <li><a href="#">settings</a></li> <li><a href="#">log out</a></li> </ul> </div> <div class="user-profile large"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>username</strong></a></p> <p><span>designation</span></p> </div> <a href="#" class="more-options">more options</a> <ul class="more-options-list"> <li><a href="#">profile</a></li> <li><a href="#">settings</a></li> <li><a href="#">log out</a></li> </ul> </div> <div class="user-profile small"> <img src="http://placehold.it/50" class="user-thumb" /> <div class="user-profile-meta"> <p><a href="#"><strong>username</strong></a></p> <p><span>designation</span></p> </div> <a href="#" class="more-options">more options</a> <ul class="more-options-list"> <li><a href="#">profile</a></li> <li><a href="#">settings</a></li> <li><a href="#">log out</a></li> </ul> </div>preview
this how appears , without menu open.
hope helps achieve want.
Comments
Post a Comment