I'd like to implement a sidebar, where each entry will have an Icon along to it's text.
In deactivated state, the sidebar shall display only the icons, wheres in activated state, the sidebar shall expand to its whole width, showing its entries with both icons and text.
Just like the menu button in Expanding Menu Button, but this behaviour for the whole sidebar.
Can this be done using Semantic UI?
I have asked a similar question a while ago here, and I managed to solve it myself, by modifying some of Semantic-UI's source code.
Unfortunately, the modifications were too extensive to post them directly in this answer, so I have created a github repo with an example here. Hopefully it helps. Due to the fact that the source code from Semantic-UI was modified, normal sidebars will probably be buggy.
Related
I am Trying to find out the "correct"(best practice) way of creating toggleable sidebar with bootstrap 4. Gone through the examples on the internet and not so sure if those were so good...so If someone can send me related resource links ,it would be great so that I can analyze it.
-I am from android platform so I'm a newbie when it comes to web development but I'm trying to achieve that kind of sidebar like on this side: link -notice: sidebar doesn't change its width(stretching) while changeing the size of a browser -until a point when it jumps over to icons width.
Bootstrap does not have an "official" sidebar implementation so nothing is "correct" here. As long as it works cross-browser/cross-device, anything is good to go.
Regarding the sidebar implementation itself, there are various options:
opens above the content,
pushes the content to the opposite side
squeezes the content
The above options and the array of animation possibilities for:
the sidebar itself,
the menu item containers,
the menu names/labels
and the menu icons...,
...make any attempt at providing an example prone to subjective preference and would render your question off-topic.
Other possible features are
auto-open above certain width,
auto-close below certain width,
reordering of elements,
three-state (full, min and off).
But on topic, the only objective answer to your question is: there is none (official).
As a starter, you might want to take a look at this simple sidebar. It works prefectly fine with v4. Just import the simple-sidebar.css and adjust the calls to match your project's elements.
In the end, the sidebar is all about two containers and applying a class (plus, ideally, some aria- attributes for screen readers). What you put in those containers and how you adjust the contents to look in each element state is all about your own (or the designer's, or the client's) personal preference.
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I'm new at theme building and teaching myself, I hope I can explain myself properly:
When I add things to my tumblr sidebar, my expanded footer moves to the bottom of the sidebar. On my previous theme using:
<!--{/block:IfSidebar}-->
</div>
stopped this. On this one it does nothing as there is no call to action to start the sidebar that I can see, it's not negotiable.
I am using a heavily customized theme from a company who no longer provide theme support and updates, I'm using it as a template.
I know there is a simple answer to this, what am I missing?
http://thecomicartblog.tumblr.com/
I am using twitter bootstrap and has a very long page that I divide into multiple sections.
I'd like to implement a Section Indicator on top left of the screen that always shows where the reader is currently reading, like the screenshot below:
I managed to get the layout correctly as shown here:
However, I've got some problems that I've been working for a few weeks but still can't solved:
How to mark the current section dynamically as the user scroll
How to animate the movement of the arrow from the source to the next (or directly to the destination if the reader click a farther away rather than scrolling)
I've tried with the simpler version from getbootstrap.com/components but still to no avail... Please help... this is very stressful as I'm particularly weak in javascript and css :(
EDIT:
To summarize the answer:
Take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
For a single-page website have a look at the One Page Navigation Plugin http://trevordavis.net/blog/jquery-one-page-navigation-plugin. It assigns a css-class to the current menu item upon clicking and as the user scrolls down the page.
I'm building the following project website http://hpsfo.bitbucket.org and would like to add the twitter widget as part of the navigation bar to cover the need for announcements, project updates, "what's new" etc. While adding the twitter widget I bump into two issues.
The first issue is that I can't find the way to vertically align the widget correctly even when I inline the style like this <li style="vertical-align: middle;">, what shall I do here to get the correct middle vertical alignment? The second issue is that upon loading, the style is shown incorrectly and then it "loads" the correct button style on the fly, you can see this unwanted effect by refreshing the page. How can I avoid this?
UPDATE: the second issue seems to be related to remotely loading the js file from the twitter server. I think I could solve this by simply inlining the file into my project website.
I think you should just put
<li style="margin-top:10px;">
For performance issue, put as much as you can of your JS to the footer, so JS loads after the important stuff.