Trong hướng dẫn này, tôi chia sẻ các bước để thêm biểu tượng tìm kiếm kính lúp ở bên phải thanh nav primary menu trong theme Genesis khi click vào sẽ mở ra lớp phủ toàn màn hình hiển thị khung tìm kiếm.
Ngoài ra chúng tôi sẽ sử dụng tập lệnh jQuery Sticky-Kit để làm cho nav chính vẫn cố định trên đầu trình duyệt khi người dùng cuộn đến nó.
Demo giống cái này của bác apple.com
Nút click tìm kiếm trên màn hình.
Lớp phủ tìm kiếm toàn màn hình khi biểu tượng tìm kiếm được click.
Note: Bài viết được hướng dẫn trên theme Magazine Pro và nó sẽ hoạt động trên bất kỳ child theme nào.
Hướng dẫn add search full screen vào Nav Primary trong theme Genesis
Bước 1: Tải toàn bộ thư viên full-screen-overlay-styles.zip
Bước 2: Giải nén file full-screen-overlay-styles.zip
Giải nén tệp tin zip vừa tải xuống, copy toàn bộ file classie.js, demo1.js, global.js và modernizr.custom.js vào thư mục js.
Tải lên file css/style3.css tới thư mục css của child theme (tạo mới nếu không có thư mục css).
Tải lên images/cross.png vào thư mục images của chủ đề con (child theme).
Bước 3: Thêm đoạn mã sau vào cuối file functions.php
Thêm đoạn mã bên dưới vào cuối files functions.php trong thư mục child theme.
<?php
//* Do NOT include the opening php tag
//* Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
}
add_filter( 'wp_nav_menu_items', 'sk_menu_extras', 10, 2 );
/**
* Filter menu items, appending a a search icon at the end.
*
* @param string $menu HTML string of list items.
* @param stdClass $args Menu arguments.
*
* @return string Amended HTML string of list items.
*/
function sk_menu_extras( $menu, $args ) {
//* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
if ( 'primary' !== $args->theme_location )
return $menu;
$menu .= '<li class="menu-item alignright"><a id="trigger-overlay" class="search-icon" href="#"><i class="fa fa-search"></i></a></li>';
return $menu;
}
//* Enqueue Search in Overlay Scripts
add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );
function custom_load_scripts() {
wp_enqueue_style( 'style3', get_stylesheet_directory_uri() . '/css/style3.css' );
wp_enqueue_script( 'modernizr', get_stylesheet_directory_uri() . '/js/modernizr.custom.js' );
wp_enqueue_script( 'classie', get_stylesheet_directory_uri() . '/js/classie.js', '', '', true );
wp_enqueue_script( 'demo1', get_stylesheet_directory_uri() . '/js/demo1.js', '', '', true );
wp_enqueue_script( 'global', get_stylesheet_directory_uri() .'/js/global.js' , array( 'jquery' ), '1.0.0', true );
}
//* Customize search form input button text
add_filter( 'genesis_search_button_text', 'sk_search_button_text' );
function sk_search_button_text( $text ) {
return esc_attr( '' );
}
//* Overlay content
add_action( 'genesis_after', 'sk_search' );
function sk_search() {
echo '<div class="overlay overlay-slidedown">';
echo '<button type="button" class="overlay-close">Close</button>';
get_search_form();
echo '</div>';
}
Bước 4: Thêm đoạn CSS vào style.css
/* Search Box in Full Screen Overlay/* Search Box in Full Screen Overlay------------------------------------------------------ */
a.search-icon {
}
.genesis-nav-menu a.search-icon:hover { color: #1ac5a5;}
body .overlay { background: rgba(26,197,165,0.9);}
body .overlay .overlay-close { background-image: url(images/cross.png);}
.admin-bar .overlay .overlay-close { margin-top: 55px;}
.overlay .search-form { text-align: center; position: relative; top: 50%; /*height: 60%;*/ -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.overlay .search-form { margin: 0 auto;}
.overlay .search-form input[type="search"] { width: 500px; border-radius: 4px;}
.overlay .search-form input[type="submit"] { font-family: FontAwesome; clip: inherit; width: 55px; height: 55px; font-size: 40px; background: transparent; color: #fff; position: static; margin-left: 10px; padding: 0; vertical-align: top;}
.overlay .search-form input[type="submit"]:hover { color: #333;}
@media screen and (max-height: 30.5em) {
.overlay .search-form { /*height: 70%;*/ font-size: 34px; }
}
@media only screen and (max-width: 768px) {
a.search-icon { font-size: 16px; padding: 20px 16px; }
.overlay .search-form { height: 70%; }
}
@media only screen and (max-width: 568px) {
.overlay .search-form { height: auto; }
.overlay .search-form input[type="search"] { width: 300px; }
.overlay .search-form input[type="submit"] { vertical-align: middle; }
}
@media only screen and (max-width: 568px) {
.overlay .search-form input[type="search"] { width: 200px; }
}
Lưu lại kết quả.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những tin tức mới nhất, hấp dẫn nhất qua email nhé. Cảm ơn rất nhiều. 🙂
