how to design a html 5 dropdown - html

I am designing a website using vue.js (vue-cli3) and,
I am in need of designing a select list, that looks similar to the below image
I have currently done some minor designing like, changing the arrow icon, etc. i would like to know if there are any dropdown packages that can be used or if some one can point out any tutorials that i can refer to design an html select.

For your problem, you should have a look at : https://www.w3schools.com/howto/howto_js_dropdown.asp
or : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click
For your future problems of that sort, you should have a look throughout w3schools.com's entire website. You'll probably find almost everything you are looking for!

Related

How to add specific elements to an existing tumblr theme?

I am currently using a premade theme on my Tumblr (pixiplum.tumblr.com). I want to keep the overall design and sidebar/navigation for my downloads page, but want the posts to appear in a grid-style like this (https://kumikya.tumblr.com/dir) with filters.
I am confused as how to make this possible. I created the downloads page and used 'Standard Layout' and tried adding fitting codes to make the grid, but I am clueless. I also tried using the theme HTML as the custom HtML but this makes the page look weird, lol.
I am pretty clueless and hope to get a little more knowledge.
Thanks already :)
'

How can I add a table in a theme using Wordpress

I’m building a site as part of my research using Word Press. I’m trying to display samples on the homepage in a neat way, something similar to this one http://www.maitrechoux.com/menu/index.html?categ_id=all .
I have removed all of the home function using remove_action. How can I add the table and then how can I add the pictures inside each cell? Is it only matter of CSS or do I need to add HTML code for this? I recently joined word press community and this is the only thing remained to complete my website. Really appreciate any help!
NO, don't use tables. I think what you actually want is just to display something that looks like table.
You need to code both html and css for that.
You can use any of popular css frameworks to help you out, or you can code it yourself using, flex, floats, or grid...
When you are done then with wp functions you need to render that data in your wp theme.
Your question is to broad and big to be answered via code snippets or examples, sorry.
I recently wanted to change the template of my WordPress website and use React tables.
But this would cause my site to drop in Google rankings, and in terms of SEO, this would not be a good thing.
That's why I decided to use my template pre-built tables and change the files to my liking in the settings section by editing css files.

HTML to WordPress

I've never used WordPress.org before. I'm wondering if I can convert this html website that I have to wordpress exactly the same?
https://reporting.pacificamerican.org/pas/
And if this website is a wordpress site, does it means that I don't have to go into the codes if I want to update my content? Because right now with html site it takes more time to update all the contents.
Thank you.
Yes, you can, but looking at the content I wouldn't say it looks like a great idea. Mostly because of how static the current content seems to be.
Pros:
It looks like you are about to add a blog-page. WordPress does make such re-occuring content easy.
It looks like you have repeated the menu on every page. (If you change the menu on one page, then you have to makes changes to all pages as well?). WordPress would help with that and let you use one menu everywhere. But there are also tons of easier methods to accomplish the same thing without WordPress. (For example <?php include 'menu.php';?> using PHP).
Cons:
The "multiple sub-pages in one page" that you are using doesn't play naturally with WordPress. Absolutely possible yes, perhaps not even difficult, but not out-of-the-box for sure.
The time it would take to edit pages would likely not change as drastic as you hope. I believe that the current content looks so static that anyone with a bit HTML/CSS knowledge would rather want to edit those static html files over having to click around in the WordPress admin interface.
The scroll-spy, editing tables and things like the yearly admissions does not come naturally either. I can think of a few dozen ways to solve such things with WordPress, but if you are going to do this work yourself, then the WordPress-conversion will take some effort and the results will not always be as pretty as you might imagine.
You'll definitely take a performance hit over using only static html. (But that is true for any CMS/framework)
My suggestion would be to first look at your current workflow. Perhaps look at an IDE that can upload with a click or on save, have history so you can back up when things break, and predefined snippets that make static content changes easy, (and of course code syntax highlighting!).
What tools are you using now?
Also remember that you are asking on a coding-site. Not many here would opt to use the WordPress editor over simply editing html-files. In fact, I dare to say many here carries a deep grudge after having to work around some specific quirks in the WP editor (aka tinyMCE).
Sure, you could replicate the layouts.
Sure, your content would be editable with just a form.
It would take a lot of effort, but certainly doable.

Hover over Dropdownlist HTML5 looking for a specific code

I want to make a form with dropdownlists like the ones on the site Nafham.com website exactly (with the headers on hover on first one and multiple columns). Are there any ready scripts for that? Is it possible to do the exact thing in Twitter Bootstrap? I am new to HTML5 so I appreciate any feedback. Thanks.
With reference to your comment above, there is a difference between stealing and gaining inspiration. So far for Off-Topic
When i understand you correctly, you want a dropdown menu with multiple columns. This can be relatively easy done with simple CSS. Learn about basic CSS and try to implent your own version, based on the bootstrap dropdown, if you like.
Correct me if i missed anything.

Help with css layout

Im attempting to re-create the following layout seen in the screenshot below.
I wanted to ask whats the best way to go about creating the menu and content section.. im not quite sure on how to join the selected menu option with the content section, any advice would be great
Also should i use ul/li for the menu?
And the top menu bar (where is says create) should i use a big div, with each item as spans inside?
thanks for any help
In order to recreate this layout, you will need to learn a variety of concepts.
First, how to style an unordered list ( <ul><li> ) to work as navigation.
Second, you will need to learn how to position elements, either through using float:left|right or position:absolute|relative.
Finally, and perhaps most importantly, you will need to learn how to use either Google Chrome's Developer Tools or Mozilla Firefox's Firebug, as these are indispensable tools for reading and writing html/css. Specifically, you will need these tools in order to inspect the code for other websites to see how they implemented their design. This is perhaps one of the best ways to learn code (at least it was for me).
Providing a detailed description of how to do all of this would take too long and really detract from the valuable learning experience you will get from googling, fiddling around in the original source code, and trying to recreate it in your own site. If at any point in that stage you have trouble implementing something, then by all means come back to stackoverflow and ask for help :)