Final update date: March 22, 2025 at 8:24 AM
This website uses the WordPress plugin Popup Maker and CSS to create a stylish hamburger menu in a classic web design.
The pop-up menus opened in the modal window are created using the block editor, and all decorations of various buttons and controls when mouse over are implemented in CSS.
When it comes to menu display, you can also use the WordPress plugin "Sticky Menu (or Anything!) on Scroll", which displays a follow-up menu, but the free version lacks functionality and the Sticky menu feels like it's also a nuisance. , recruitment has been suspended.
Therefore, in view of the harmony with the current design, I thought it would be best to place a small hamburger menu in a fixed position that doesn't get in the way in the top right of the screen, so I decided to make my own menu.
With these measures, we hope that while still providing a classic web design, we have implemented a slightly stylish and smart GUI, which will improve UX when browsing.
table of contents
Hamburger menu demo (video)
On the Blog Viewing screen, click on the hamburger menu in the top right and then watch the video.
What is Popup Maker?
Popup Maker is a popular WordPress plugin and is a tool that allows you to easily add pop-ups to your website. This plugin allows you to customize the pop-ups that appear when users visit the site to communicate messages, display advertisements, and gather information from forms.
Main features
- Various pop-up types: There are a wide variety of pop-ups, including floating, slide-in, slide-out, modal.
- Customizable: You can freely customize pop-up designs, text, images, videos, and more.
- Trigger settings: Pop-ups can be displayed based on specific events or conditions. For example, page visits, specific timing, user behavior, etc.
- Responsive design: Designs can be used for mobile devices and different screen sizes.
- Analysis Tools: Track the performance of pop-ups and collect data such as success rates and click-through rates.
How to use
- Installing the plugin: Search for "Popup Maker" from the WordPress plugin menu and install it.
- Initializing the settings: Enable the plugin and perform the initial settings.
- Creating a pop-up: Create a new popup and enter the required information.
- Setting the trigger: Sets the conditions under which the pop-up will be displayed.
- Customizing your design: Customize the appearance of the pop-up.
- Save and publish: Once the settings are complete, save and publish the pop-up.
Popup Maker is a powerful tool for improving user engagement and is used by many websites.
Creating a hamburger menu
We will explain how to create a hamburger menu using Popup Maker in WordPress.
In this example, we will make changes to the WordPress theme for the Home Page Builder sold by JustSystem.
As mentioned above, the changes will be made into the subtitle section of the site, and the hamburger menu icon will be placed at the end of the page, and then moved to the specified position using CSS.
Theme program modifications
The program for the theme to be modified is "header.php". The following highlighted lines add the script:
The icon file directory for the hamburger menu is "/icons", the file name is "sticky.jpg", and the class name is "sticky-menu".
<div id="hpb-header-extra1">
<p class="address">元SEの千里が運営するサーバーやWordPress, LGBT関連の話題を提供</p>
<img src="/icons/sticky.jpg" class="sticky-menu" border="0" width="18" height="18" alt="メニュー表示" title="メニュー表示">
</div>CSS definition for hamburger menu icons
The CSS icon for the hamburger menu is as follows:
The icon is set to transparent image, and the image is responsively compatible, such as fixed display position (top right of the screen), displaying the frontmost position (maximum z-index value), switching image size (PC/smartphone), and zooming when mouse over. Masu.
In order to harmonize with the current design, the hamburger menu is set to a fixed position display rather than a sticky menu, so the position property is set to 'fixed', which is to always fix the display position, rather than 'sticky'.
In addition, if you want the hamburger menu to be displayed in the example below to the foreground of the pop-up, set the z-index value to 'calc(infinity)'.
In addition, to prevent the icon from disappearing due to the influence of Google Adsense ad banner, smartphones have set the display position shifted downward.
In the example below, the icon size is set to a smaller size, but you can change it by using the 'width' value if necessary.
If you set up a hamburger menu on a site that uses Google AdSense, the menu may become unseen due to AdSense ads, so if possible, make sure to set the "Excluded Page" to prevent it from being displayed at the top of the screen, and anchor ads and full-screen ads I think it would be better to avoid this as well.
In that case, ad revenue from Google will decrease, but it will contribute to improving UX, and screen disruptions in ads will be eliminated, so the "CLS issues" numbers in Google Search Console will be improved, and search rankings will be increased. It may also increase.
This site does not aim to earn money from advertising revenue, so we do not have high expectations for Google AdSense, but for those who are not, this may be a difficult problem.
/*
Stickyメニュー設定
*/
#hpb-header-extra1 .sticky-menu {
opacity: 0.5; /* 透過指定 */
z-index: 2147483646; /* 最前面表示*/
position: fixed; /* 画面上の位置を固定 */
top: 40px; /* 上からの位置 */
right: 30px; /* 右からの位置 */
width: 24px; /* 画像の幅 */
height: auto; /* 画像の高さ */
}
@media (max-width: 480px) {
/* スマホ対応 */
#hpb-header-extra1 .sticky-menu {
top: 70px;
right: 10px;
width: 18px;
height: auto;
}
}
/* マウスオーバー時に拡大 */
#hpb-header-extra1 img.sticky-menu {
display: block; /* コンテンツのひとかたまりとなる要素 */
transition-duration: 0.5s; /* 変化にかかる時間 */
}
#hpb-header-extra1 img.sticky-menu:hover {
transform: scale(1.3,1.3); /* 画像の拡大率 */
transition-duration: 0.5s;
}Creating a pop-up menu
The pop-up menu is created using the WordPress plugin "Popup Maker."
Immediately after installation, the classic editor will become the default editor, so enable support for the block editor in advance in the settings screen "Settings" as above.
In this example, a pop-up is created with the pop-up menu name "Menu".
Pop-up menu settings
The gallery below is the pop-up settings screen.
To set the settings, click the Trigger: Hamburger menu icon (class name: ".sticky-menu") to display a pop-up, pop-up theme: "Enterprise Blue", size: "Auto", animation display: "Fade and Side ", Display position: "center", notification sound: "Beep 2".
Also, in the Close process, select the "Alternate Methods" tab and check "Click Overlay to Close" and you can close the screen even if you click on the background of the pop-up window.
If you set cookies, pop-ups will only be displayed once, so if you want to keep them visible all the time, you will need to set them to "None".
Customizing the pop-up theme
The pop-up theme can be customized. Below is the background (Overlay) color and transmittance setting screen. You can also set the background color, style, title, etc. for the text screen (Container) of the modal window.
The paid version also offers "Advanced Theme Builder," a tool that allows you to add designs created in PhotoShop or Canva to your theme as a pop-up background.
Creating a pop-up menu
The gallery below is an example of creating a pop-up screen.
Here, we have a menu link in the border box in the plugin "VK Blocks," which extends the block editor.
The background color of the pop-up screen can be set using the pop-up theme, so there is no need to set the background color on this screen.
In addition, set "popup-menu" as the additional CSS class to the block (border box) that describes the link in the menu. Instead of border boxes, you can use column or paragraph blocks from the Block Editor.
CSS definition in pop-up menu
The CSS for the pop-up menu is as follows:
The text link is displayed in a light blue button shape. When you hover over the mouse, the button changes to white.
/*
ポップアップメニュー設定
*/
.popup-menu {
margin:10px;
a {
color:white;
background-color: skyblue;
padding:5px 8px;
border-radius: 5px;
text-decoration: none;
}
a:hover {
color:skyblue;
background-color: white;
border:3px solid skyblue;
}
}Viewing the pop-up menu
To the pop-up menu, click the hamburger menu icon, which is fixedly placed in the top right corner of the screen. In the example below, a list of news articles is displayed from the pop-up menu.
