Portal field news

Portal field news

in ,

👩‍🎓 | [Notice from the editorial department] Report on UI improvement for both PC and smartphone sites

On November 2021, 11, the photo education information site "Risemum" was renewed, including the design of the smartphone site and the change of global navigation on both PC smartphone sites.

[Notice from the editorial department] Report on UI improvement for both PC and smartphone sites

If you write the contents roughly
Also, in the "menu" (commonly known as the hamburger menu) on the upper right, the contents are organized by category and presented to the reader in an easy-to-understand manner.

The educational information site "Risemum" (hereinafter referred to as "Risemum") will be launched on November 2021, 11 for smartphone site design and PC ... → Continue reading


The educational environment, university entrance examination reform, and the environment surrounding children are undergoing major changes. Amid the changes of this era, parents' interest in the education and career of children is only increasing. Risemum will transmit accurate and useful information centered on educational information, as a medium that is close to the hearts of parents. We will promptly deliver information that parents are interested in such as education reform, international education, examinations, educational events, STEM education including programming.

Wikipedia related words

If there is no explanation, there is no corresponding item on Wikipedia.

Hamburger button

Hamburger button(English: hamburger button) Is generallyGraphical user interface (GUI) Placed in the top corner of the screenpush buttonAnd unintentionallyHamburgerIt was so named because it resembles[1]It is an icon.Hamburger iconAlso called.

toggleMENU(Hamburger menu(Sometimes called) or(English edition)It functions as a button operation and can be folded or displayed on the screen.

Twohorizontal lineThis consists ofWidgetThe icon associated withFolding menu icon Also known as (collapsed menu icon).


Thisicon The(English edition)First designed by 1981Xerox Star OfUser interfaceIntroduced as part of[2].. Since 2009screenArea is limitedMobile applicationWill be revived with the spread of[3][4][5]. thisiconRegarding the creation of, Cox said, "road signIt was designed with the intention of making it extremely simple, easy to remember the functions, and resembling the list of displayed menus.Very fewPixelIt had to be simple but easy to understand, as it could handle numbers.We are 16x16pixelI just displayed the image (maybe it was 13x13 ... I don't remember clearly ...) "[6].

The case where it is estimated that the hamburger button was first adopted after Xerox Star is1985/Was released onWindows 1.0And the control menu on each screen contained a hamburger icon[7]..However, this is short-lived as an icon,Windows 2.0Was replaced with a single horizontal line indicating the control menu.

Windows 95Then, instead of one horizontal line, instead of the icon that each program has[8],10 Anniversary Windows UpdateでStart menuThe hamburger icon never returned to Windows until it was placed in[9].

Appearance and function

The "Menu" button is made up of three horizontal lines lined up side by side.Imply a list, Consists of icons (≡Is displayed as)[3]..This name is due to the fact that it resembles the menu expanded by operating the icon.[10]..When the menu is displayed, the icon changes to three vertically arranged dots (⋮Is displayed).Microsoft Office 365Now, you will see an application menu with three similar rectangles arranged in three columns.[11]..The menu is expanded by button operations such as tapping and clicking, and it is always displayed on the screen.menu barOr distinguished from the tab bar[12].

Another type after operating the menu button is≡The menu bar overlaps the button,≡Buttons that switch to x buttons[13]and so on. Many of the patterns that switch to the x button display an animated effect.[14].


While the foldable menu icon has become commonplace, it is argued that its function is not always obvious when confronted for the first time.[15]..Especially for old users who are not familiar with modern symbolic expressions, it is easy to get confused.[16].

In exchange for helping to save screen area in mobile applications, menu buttons compare to the menu bar at the bottom of the screen(English edition)Will increase and require more clicks to get the same information[17]..There is also an argument that designers tend to overload these icons and hide them.[16].


[How to use footnotes]


  1. ^ "How To Create a Menu Icon". www.w3schools.com.As of August 2018, 9originalMore archives.2018/9/20Browse.
  2. ^ "The origin of the hamburger icon”. As of May 2015, 11originalMore archives.2018/9/20Browse.
  3. ^ a b Campbell-Dollaghan, Kelsey (March 2014, 3). “Who Designed the Hamburger Icon?". Gizmodo.As of August 2016, 2originalMore archives.2016/2/2Browse.
  4. ^ "A Brief History of the Hamburger Icon". placeit.net (February 2014, 10). As of February 29, 2017originalMore archives.2017/1/25Browse.
  5. ^ Ltd., Stuff & Nonsense. “We need a standard show navigation icon for responsive web design”. As of May 2018, 9originalMore archives.2018/9/20Browse.
  6. ^ "A Brief History of the Hamburger Icon" (English). Placeit Blog (September 2014, 10). 2019/2/23Browse.
  7. ^ Ali, Fahad (May 2015, 5). “Microsoft First Used The Controversial Hamburger Menu In 1985". windowschimp.com. 2019/6/12Browse.
  8. ^ Doppelhammer, Jim. “Windows Elements". doublehammer.com. 2019/6/12Browse.
  9. ^ Shaikh, Rafia (April 2016, 4). “Here's How the New Windows 10 Anniversary Start Menu Looks Like". wccftech.com. 2019/6/12Browse.
  10. ^ Lessin, Jessica (March 2013, 3). “What's a'hamburger' button? A guide to app features”. The Wall Street Journal (Dow Jones & Company). originalArchived as of October 2015, 4.. https://web.archive.org/web/20150416195303/http://blogs.wsj.com/digits/2013/03/18/whats-a-hamburger-button-a-guide-to-app/ 2015/4/10Browse. 
  11. ^ Nguyen, Chuong (June 2015, 6). “Office 365 Store saves time with single sign-on to web apps". Tech Radar Pro.As of August 2018, 2originalMore archives.2018/2/8Browse.
  12. ^ Constine, Josh (May 2014, 5). “Kill the hamburger buttons". TechCrunch.As of August 2016, 8originalMore archives.2015/4/10Browse.
  13. ^ "WIRED.jp”. CONDE NAST JAPAN. 2022/1/19Browse.
  14. ^ "Effect 10+ when clicking the hamburger menu implemented by CSS". 2020/1/20Browse.
  15. ^ Stokel-Walker, Chris (May 2015, 5). “Hamburger icon: How these three lines mystify most people”. originalArchived as of October 2018, 2.. https://web.archive.org/web/20180220073719/http://www.bbc.co.uk/news/magazine-31602745 2018/10/11Browse. 
  16. ^ a b "Loving & Hating the Hamburger Icon" (English). Web Designer Depot (September 2018, 9). 2019/2/23Browse.
  17. ^ Tsiodoulos, Dimitrios (2016), Comparison of hamburger and bottom bar menu on mobile devices for three level navigation, originalArchived as of 2018-06-13., https://web.archive.org/web/20180613235022/http://www.diva-portal.org/smash/get/diva2:922114/FULLTEXT01.pdf 2018/6/13Browse. 

Related item


Back to Top