I am looking for an outlook style navigation sidebar for my web application which looks similar to:
I know there are versions of this available as winform controls and through the Visual WebGUI system but these are Microsoft based solutions. What we are looking for is a strictly Javascript & CSS based solution or at the very least server independent. I am aware of similar solutions which have been made in the past which use jQuery's accordian plugin but that results in the sections moving up and down rather than being pinned to the bottom of the navigation bar the way the outlook solution works.
The basics of what we are after is...
Title Bar
Tree Navigation Section
Section Navigation Buttons at Bottom
Section Navigation Buttons Compressable To Single Row (Optional)
Would like to use an existing solution out there if there is one rather than needing to build my own.
Thanks in advance.
Try below links, these will help you to make build expected behavior.
Example- Web Application User Interface as Outlook
Outlook Style Menu With Collapse Side Menu
Related
I would like to make a news portal, where next to the post excerpts there will be an image. When you click on the image, the title or the post excerpt , the whole content will be shown (accordion / toggle effect), resizing automatically, in the responsive way, the assigned picture. How to do that on any drupal theme? Example – news.google.com
Graphic explanation: http://imgur.com/a/eBfjU
Maybe there is an extension / module or template that allows for a simple adaptation of such a solution? I know there are accordion plugins, but I do not know how to apply them to the images auto-expand on-click along with content.
Thank you!
This is more front-end than drupal question.
And "how" - you have to make your own theme by inheriting some other (if you don't want to start from scratch).
Then, you have what will that your page be? Node in some new content type or a view or something else.
Then, find some documentation/tutorial how to theme that kind of page.
You must have some deeper understanding how the drupal works before going to real work.
Most pages on the Magento backend utilise a tabbed interface with the tabs displaying on the left and the content in the main container on the right.
I am looking for a way to change this (product edit for example) to show all the tabs on top of each other with a collapsible accordion.
I have noticed that the admin section does include the accordion effect I am looking for within the config section (ie config->general->countries options).
Does anyone have any tips or pointers on how to remove the left side tabs all together on other pages and have them displayed as a vertical accordion?
Any help would be appreciated.
This is not an answer to your question as much as it is a suggestion.
Magento can do something similar without any programming needy. If you navigate to Catalog → Attributes → Manage Attribute Sets & choose the default option, you'll be able to manage which attributes are editable on a per tab basis.
I need to create an area of the page that has it's own scroll bar, just like the Facebook messenger in the image below.
Stack overflow has the same system at the answers with large pieces of code, but that scroll bar is not styled.
Note at the picture and you will see the normal scroll bar and the styled scroll bar in the Messenger DIV. Anyone knows how to do it?
I imagine that custom scrollbar is implemented in javascript, it looks very slick and you can't make a browsers scrollbar look that good!
Find an example I just put together for you at: http://jsfiddle.net/9LHPW/2/ - note check the resources tab as this includes four external files (3x Js and 1x CSS)
Have a look at this website for a further example (looks like exactly what you want) with Javascript and jQuery: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
You can find the plugin's home at http://manos.malihu.gr/jquery-custom-content-scroller
Along with a how to use it section!
This should help: http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
Another one here: http://dotroe.com/subpage.html
Those are jquery plugins that you can use on your pages.
Use j scroll pane. It's great, very customisable, lots of demos here: http://jscrollpane.kelvinluck.com/#examples
I have styles with CSS the ootb (out of the box) top navigation in Shrepoint 2010. However I also want to add icons (.png images) for ech navigation manu itme. So for exapmple for Home I will like to an icon next to it, for About Us again another icon next to it and so on for Practices, Sectors, Our Events, Our People, Publications and Working for Us.
SharePoint 2010 basically builds the top navigation by using asp controls. I can see the in firebug(Firefox) and developer tools (IE) the HTML for the top navigation hwoever on the master page this is not visible.
What is th best way include icons in the top navigation items?
Thank in advance
You need to build your own asp.net control if you are going to customise this part of the menu I'm afraid. OOTB you can only alter the CSS and (limitedly) control what is shown. You can use the same DataSource if you wish for the SharePoint UI to remain in control.
I had the same problem with a site I am working on. I wanted to add individual icons to each main menu item but had no way to target them.
To get around this without creating a custom control I used jQuery to add a class that increments based on the number of menu items and then used this class to apply styles in my CSS.
$("a.menu-item").each(function(i) {
$(this).addClass("nav-" + (i+1));
});
Hope this helps you out!
I am currently developing a site and have a need for a javascript-based carousel/slider hybrid on the home page that fades between 3 or 4 different images automatically, giving the user the chance to click on one and go to another page on the site. I also need the different slides to have some sort of navigation, denoted either by names for each slide (like in the Coda slider effect) or by symbols (such as dots for each slide), to allow users to review their options before clicking on the slide to visit the particular highlighted section.
I have seen this done in many ways with flash , but the only javascript approach I have seen that meets my needs is the one used by Apple on the new iLife page (link). Does anyone have any ideas what they are using or if there is a project that is similar to their implementation?
Thanks in advance.
Unless I'm missing something, the navigation on iLife looks like a photo gallery where the large photo links to the destination. I've used the jQuery Galleria for photo galleries because the animation effects are superb. Also the forum provides helpful community-based support.
If you wanted a carousel-style animation with the images sliding left and right, might try the jQuery Carousel library. I have not used it myself though so cannot comment on its ease-of-use or quality.
jQuery animate or jCarousel
The YUI Carousel Control would be another starting point to have a look at. (Note as of writing it is currently in beta.)
Hey I am not sure how helpful this will be but check out this slider. It is super simple and has the navigation thumbnails i think you are looking for
http://codetutorial.caroshaw.com/jquery_image_slider.php