I am trying to design a Menu bar like ckeditor or TinyMCE. Any idea how to design as i have just sufficient knowledge about CSS and JS so i can do that my own but not getting any clue after spending so much time on ckEditor using firebug console.
I would suggest you look at normal navigation menu methods - ie create a list with links - you can style the list with images or drop down menus as you wish ... check List Apart for horizontally styling lists -> http://www.alistapart.com/articles/horizdropdowns
Related
I'm looking to build something like this into my webpage:
I'm interested in the box at the bottom of my mockup, which shows the menu items on the lhs and the panel on the rhs that will show different content when clicked. I'd like to build it in html and jquery if possible.
I've seem similar things before, but I don't know the term for them. At the moment I'm googling show/hide panels show/hide menu buttons etc, but nothing is coming up. So hoping that this is a standard (ish) thing and that someone can help me out and let me know what I should be Googling!!!
Thanks!
It's a "tab panel" (or "tabbed panel"), with the tabs arranged vertically on the left. This is usually an option available on various tab panels even if they default to tabs across the top.
I'd like to have a navigation menu for an education website similar in structure to the one found here.
Take note of the left-hand navigation menu header and list items. In desktop view, all nav items appear, but in mobile view, only the header is visible (and you have to click the + icon to have the nav menu items appear)
Looking at the elements it appears there's some javascript working in the background that switches the CSS class names when the site goes to mobile view.
I've been trying to recreate something similar to no avail...
Could someone please take a stab at it using a simple structure like this using JSFiddle?
Nav Title (on click, Nav Menu Items 1-3 appears/disappears below)
Menu Link 1
Menu Link 2
Menu Link 3
I'd really appreciate it! Thank you!
there are already existing bootstrap templates and plugin that meet your requirement. Also you can leverage android material design guide line & sample templates.
https://getmdl.io/
(Edit: Copied from OP's comments:)
... is the design guideline from google for making web-apps. The idea is to make consistent looking as native possible. the site includes components like icons, widgets, navbar etc. Also contains sample templates that can be clone or download from git.
http://getbootstrap.com/
Bootstrap on the other hand have same features but its more targeted mobile first design approach.
Again if you want both you can check out materializecss.com
I have an Ecommerce software that a company i work for is using. I'm trying to change the layout that the software outputs for variable products.
Sadly i do not have the ability to change the HTML. My plan is to .append a div using Jquery then swapping the Selection Menus at the bottom of the layout to the new created div using the flexbox order rule. Flex Rule Here This in theory would allow me to move the selection menus into the row above them, and place them right below the forms on the left side of the page, and keep the proof image on the right side still. Here is a visual example...
As you can see they have the layout set up with an un-ordered list, and the sections are list elements within the un-ordered list.
The code i'm trying to acheive this with is..
$('#right-column').append('<div id="selection-swap">Swap Here</div>');
Could someone take a look at my Codepen and let me know what i'm doing wrong here?
Codepen Here
I want to build a Web page (in Asp.Net) containing a Dynamic Menu where the user can Move the Icons or the Menu contents, like a grid menu in android for example...
What should I use? CSS, Javascript, HTML5 or JQuery, anything to start with.
All what I want is a Large icons Menu that icons can be Moved dynamically...
Thanks all...
Pretty broad question, but you definitely will need Javascript/jQuery to get this done.
I would look into the jQuery UI library and especially into http://jqueryui.com/demos/draggable/ for draggable elements.
Since you're aiming for an Asp.Net site with, I'm assuming, dynamic content to feed the menu; I would start by building a static version of the kind of menu you want, using Html, CSS and jQuery. Once you get that part working right, you can look into building an Asp.NET user control or a configurable custom control that will render the entire html/JS/css markup based on dynamic content.
I have a very complex navigation menu I am trying to create, it looks something like this:
Basically it's a 3 level navigation bar that has 2 parent tabs, when you hover over any of the tabs you should be able to see its child navigation levels and when you hover out you see what you are currently on.
Another problem is that the two parent tabs have two different color themes, parent tab 1 being blue with all its child levels blue and the parent tab 2 is green etc..
I'm very confused about how I should do this, maybe nested divs?
Are there any plugins that will might my life a lot easier?
Many samples are avaialble in internet but you need to modify according to your requirement.
Some examples are avialble:
http://jsfiddle.net/elusien/PayFw/8/
http://snippets.aktagon.com/snippets/200-Really-simple-hover-menus-with-jQuery
http://www.webresourcesdepot.com/wp-content/uploads/file/jquery-sliding-menu/#
Something like jQuery Drop Line Tabs might work for this situation. It's a jQuery plugin that allows for the multi-level navigation that you have in your question's image. Here's a link to the plugin (and there is a live demo on that page, as well,) if you would like to check it out: jQuery Drop Line Tabs.
If that doesn't work out... searching around online is bringing up a lot of menu plugin tutorials.
Hope that at least gets you pointed in a plugin direction for this...!