선택 게시판 게시글 작성 버튼 만들기
페이지 정보
작성자 익명 (192.♡.0.1) 작성일 23-09-16 21:03 조회 4,587 댓글 1본문
*클릭 전
*클릭 후
[code]<style>
/* 버튼 스타일 */
#menuButton {
position: fixed;
bottom: 70px;
right: 15px;
width: 50px;
height: 50px;
line-height: 50px;
border: none;
border-radius: 50%;
background: rgba(63, 63, 63);
color: #ffffff;
text-align: center;
font-size: 15px;
z-index: 99;
margin-right: 10px;
cursor: pointer;
}
/* 메뉴 스타일 */
#menu {
position: fixed;
bottom: 130px;
right: 15px;
display: none;
z-index: 100;
background-color: rgba(63, 63, 63);
border: 1px solid rgba(53, 53, 53, 0.5);
border-radius: 5px;
padding: 10px;
}
/* 메뉴 버튼 스타일 */
#menu button {
display: block;
width: 100%;
background: none;
border: none;
padding: 5px 0;
color: #ffffff;
text-align: left;
cursor: pointer;
border-bottom:1px solid #5a5a5a
}
/* 메뉴 버튼 호버 스타일 */
#menu button:hover {
background-color: rgba(100, 100, 100, 0.5);
}
</style>
<!-- 버튼 -->
<button type="button" id="menuButton">
<i class="fa fa-pencil" aria-hidden="true"></i><span class="sound_only">글쓰기</span>
</button>
<!-- 메뉴 -->
<div id="menu">
<button onclick="navigateTo('https://dsclub.kr/bbs/write.php?bo_table=free')">자유게시판</button>
<button onclick="navigateTo('https://dsclub.kr/bbs/write.php?bo_table=gallery')">갤러리</button>
<button onclick="navigateTo('https://dsclub.kr/bbs/write.php?bo_table=code')">코딩 자료실</button>
<button onclick="navigateTo('https://dsclub.kr/bbs/write.php?bo_table=zip')">자료실</button>
<button onclick="navigateTo('https://dsclub.kr/bbs/write.php?bo_table=it')">IT</button>
<button onclick="navigateTo('https://dsclub.kr/bbs/write.php?bo_table=blog')">블로그</button>
</div>
<script>
var menuVisible = false;
document.getElementById('menuButton').addEventListener('click', function () {
var menu = document.getElementById('menu');
if (menuVisible) {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
menuVisible = !menuVisible;
});
function navigateTo(url) {
window.location.href = url;
}
</script>[/code]
좋아요59
이 글을 좋아요하셨습니다
2kat님의 댓글
감사합니다.