124 lines
2.9 KiB
PHP
124 lines
2.9 KiB
PHP
<?php
|
|
/**
|
|
* Template Name: Custom Page With Fixed Menu
|
|
* Description: Trang có menu luôn nằm ở góc trên bên trái TRONG PHẦN TRANG, không phải cố định theo màn hình khi cuộn.
|
|
*/
|
|
|
|
get_header(); ?>
|
|
|
|
<style>
|
|
.fixed-left-top-menu {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
padding: 0;
|
|
width: 220px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
border: 1px solid #e4e4e4;
|
|
overflow: visible; /* Đảm bảo không cắt nội dung */
|
|
height: fit-content;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.fixed-left-top-menu .menu-title {
|
|
background: linear-gradient(180deg, #444 0%, #222 100%);
|
|
color: #fff;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
padding: 15px 20px 13px 20px;
|
|
border-radius: 8px 8px 0 0;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
margin: 0;
|
|
}
|
|
|
|
.fixed-left-top-menu ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #fff;
|
|
}
|
|
|
|
.fixed-left-top-menu ul li {
|
|
padding: 14px 20px 12px 20px;
|
|
font-size: 1.07em;
|
|
color: #444;
|
|
border-bottom: 1px solid #ededed;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
|
|
.fixed-left-top-menu ul li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.fixed-left-top-menu ul li a {
|
|
color: #444;
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
display: block;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.fixed-left-top-menu ul li:hover,
|
|
.fixed-left-top-menu ul li.current-menu-item,
|
|
.fixed-left-top-menu ul li.current_page_item {
|
|
background: #f6f6f6;
|
|
}
|
|
|
|
.fixed-left-top-menu ul li:hover a,
|
|
.fixed-left-top-menu ul li.current-menu-item a,
|
|
.fixed-left-top-menu ul li.current_page_item a {
|
|
color: #e74c3c;
|
|
}
|
|
|
|
.layout-flex-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
#primary.content-area {
|
|
margin-top: 20px;
|
|
margin-left: 0;
|
|
flex: 1;
|
|
max-width: 100%;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.layout-flex-container {
|
|
flex-direction: column;
|
|
}
|
|
.fixed-left-top-menu {
|
|
width: 100%;
|
|
margin: 0 0 20px 0;
|
|
float: none;
|
|
}
|
|
#primary.content-area {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="layout-flex-container">
|
|
<nav class="fixed-left-top-menu" id="ajax-menu">
|
|
<div class="menu-title">Đào tạo</div>
|
|
<?php
|
|
wp_nav_menu([
|
|
'menu' => 360, // Sử dụng ID menu
|
|
'container' => false,
|
|
'menu_class' => '',
|
|
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
|
|
]);
|
|
?>
|
|
</nav>
|
|
|
|
<div id="primary" class="content-area">
|
|
<main id="main" class="site-main" role="main">
|
|
<?php
|
|
while ( have_posts() ) : the_post();
|
|
the_content();
|
|
endwhile;
|
|
?>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<?php get_footer(); ?>
|