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.
Related
I want to add a split menu to a Typo3 site that shall also be responsive for mobile screens.
So far I have solved it with two separate menus using lib.mainMenu.special.value = x,y,z on both sides (left and right). The problem is how to merge the two menus to one in responsive mobile viewport.
All pages are at the same level in the tree (but this is not a must).
Any ideas, solutions, scripts or tutorials?
Depending on your framework you either have already some mechanism for changes of menu-display or you need to create your own.
Frameworks like bootstrap already use javascript to dublicate your menu into a hidden one for displaying it in the 'burger-menu' on small screens.
You can do the same: render the menu in the complexest view and rebuild other variants with javascript.
pro: smaller html, faster server-response.
con: work to do in the client, additional JS.
You also can build all versions in TYPO3 and render them and only CSS decides what to display in current screen resolution.
pro: complexer or more different markup for different versions are easier to handle, no DOM-changes at the client
con: more rendering time, bigger HTML
it depends on the complexity of the design:
is the menu splitted inside the HTML?
how much differ the splitted and joined version for each entry?
There are several approaches that could help
The oldest (and outdated IMO) is yaml css. There you could use the layout to (re)sort columns.
A nice approach I just used for a project is flexbox-layout, there you can resort, and restructure almost independent from HTML-structure. One source for explanations is css-tricks.com
another possibility is using css grid layout, you can read about it on css-tricks.com too.
with Javascript and the DOM-model you can do almost everything, you can manipulate whatever you want, it's just a matter if you like the menu determined by JS, i.e. for accessible-aspects I avoid it usually, at least on that level you like to reach.
another option is to restructure the menu, i.e adding already the 2nd menu to the first one, but using breakpoints to show it or hide it (and the 2nd menu in the right sidebar).
my preference is to create the menu(s) that only display has to be change depending on the device, but nothing has to be hidden or created double, just the styling is changing based on breakpoints.
I have solved it by hiding the menu items I want on the right side and wrapped every item with either "hide0" or "hide1" with
NO.wrapItemAndSub = <li class="hide{field:nav_hide}">|</li>
NO.wrapItemAndSub.insertData = 1
doNotLinkIt.field = nav_hide
JavaScript and CSS does the rest. Now I can display non-hidden elements in the left menu, hidden ones in the right menu and the responsive menu displays all. Thanks for the help.
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 am working on a CMS project where users can drag and drop different components(such as button, div, etc) from components menu on canvas area. Once they are happy about their layout then they click on button finish. What I want is when finish button is clicked then in popup they should see html and its appropriate CSS code.
How can I parse through those components and generate html, css and Javascript if necessary?
Are there any solutions available? I could not find any after googling.
maybe this approach is different but.
can you use of svg element? because with svg you can get positions for every element and then use for whatever you want (like get positions for example).
here some useful tutorials:
http://www.tutorialspoint.com/html5/html5_svg.htm
http://www.w3schools.com/html/html5_svg.asp (for some reason some people don't like this site)
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
What would be the points you validate when considering a new menu for your website?
Why should i choose complete CSS based menu ?
Why should i choose Javascript/CSS based menu ?
whats is the benefit in choosing either of them?
Is CSS menu old ? or is it limited in features! I dont think CSS menu is old as i still a pick a thousand web2.0 site using complete CSS menu (No javascript to control its dropdowns).
I default to pure CSS unless there is something I can't pull off with CSS animations, then I'll consider switching to JS. It's pretty rare you'll need the JS unless you need some fancy timed animation across multiple elements or something wacky that CSS animations can't handle.
Using pure CSS the menu still works even when the client has JS disabled. Plus with pure CSS it's usually less code, which is always nice.
A nice way to look at it: would you use JS to change the color of a link when you hover over it, or CSS? This is just a more complicated, but usually similar, question.
CSS controls the layout (and limited interactions, such as hover) while Javascript controls logic.
If you don't need any logic in your menu (such as displaying a hidden div element as a submenu), then using CSS on its own is just fine.