右側にボタンを配置したCSSグローバルメニュー
CSSのみでグローバルメニューを作成しました。レスポンシブにも対応してます（min-widthを調整してください）
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link class="prism-theme" rel="stylesheet" href="https://pa-tu.work/css/prism/prism.css"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #fff;
padding: 1rem;
}
.navbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem;
background-color: #333;
box-shadow: 0 2px 5px;
}
.nav-title {
display: block;
margin-right: 1rem;
padding-top: 0.3rem;
padding-bottom: 0.3rem;
white-space: nowrap;
margin: 0 auto;
}
.nav-title a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
}
.nav-check {
display: none;
}
.nav-check-label {
display: inline-box;
cursor: pointer;
padding: 0.5rem 0.7rem;
border-radius: 3px;
border: 1px solid #fff;
background-color: transparent;
color: #fff;
text-align: center;
text-decoration: none;
vertical-align: middle;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.nav-check:checked+.nav-check-label+.nav-box {
max-height: 500px;
transition: all 1.5s;
}
.nav-box {
flex-basis: 100%;
align-items: center;
flex-grow: 1;
max-height: 0;
overflow: hidden;
transition: all 0.5s;
}
.nav-menu {
display: flex;
flex-direction: column;
color: #fff;
}
.nav-link {
display: block;
padding: 0.7rem 0rem;
color: #999;
text-decoration: none;
transition: 0.3s;
}
.nav-link.active {
color: #fff;
}
.nav-link:hover {
color: #fff;
}
.btn-link {
display: block;
cursor: pointer;
margin-left: auto;
padding: 0.5rem 0.7rem;
border-radius: 1.5rem;
background-color: #46AADC;
color: #fff;
text-align: center;
text-decoration: none;
vertical-align: middle;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.btn-link:hover {
background-color: #0f97db;
}
@media (min-width:700px) {
.nav-check-label {
display: none;
}
.nav-box {
display: flex;
align-items: center;
flex-basis: auto;
flex-grow: 1;
}
.nav-menu {
flex-direction: row;
margin-left: 1rem;
gap: 1rem;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 700px; height: 393.75px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container" height="100%">
<nav class="navbar">
<div class="nav-title">
<a href="#">
タイトル
</a>
</div>
<input class="nav-check" id="nav-check" checked="" type="checkbox">
<label class="nav-check-label" for="nav-check"><i class="fas fa-bars"></i></label>
<div class="nav-box">
<ul class="nav-menu">
<li><a href="#" class="nav-link active">リンク1</a></li>
<li><a href="#" class="nav-link">リンク2</a></li>
<li><a href="#" class="nav-link">リンク3</a></li>
</ul>
<a href="#" class="btn-link">
ボタンリンク
</a>
</div>
</nav>
</div>
</body></html>
検索ボックスを配置したCSSグローバルメニュー
CSSのみでグローバルメニューを作成しました。レスポンシブにも対応してます（min-widthを調整してください）
<html style="max-height: 100%;"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style id="basic-style">body,#svg-section{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body,svg{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style id="root-style">:root{--pic-image-data:none;}</style><link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" class="manual-link"><style id="out-style">.pic-container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
box-sizing: border-box;
background-color: #ddd;
padding: 1rem;
}
.navbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem;
background-color: #fff;
}
.nav-title {
display: block;
margin-right: 1rem;
padding-top: 0.3rem;
padding-bottom: 0.3rem;
white-space: nowrap;
margin: 0 auto;
}
.nav-title a {
text-decoration: none;
color: #333;
font-size: 1.3rem;
}
.nav-check {
display: none;
}
.nav-check-label {
display: inline-box;
cursor: pointer;
padding: 0.5rem 0.7rem;
border-radius: 3px;
border: 1px solid #333;
background-color: transparent;
color: #333;
text-align: center;
text-decoration: none;
vertical-align: middle;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.nav-check:checked+.nav-check-label+.nav-box {
max-height: 500px;
transition: all 1.5s;
}
.nav-box {
flex-basis: 100%;
align-items: center;
flex-grow: 1;
max-height: 0;
overflow: hidden;
transition: all 0.5s;
}
.nav-menu {
display: flex;
flex-direction: column;
color: #333;
}
.nav-link {
display: block;
padding: 0.7rem 0rem;
color: #999;
text-decoration: none;
transition: 0.3s;
}
.nav-link.active {
color: #333;
}
.nav-link:hover {
color: #333;
}
.nav-search-box {
display: flex;
margin-left: auto;
}
.form-input {
width: 100%;
padding: 0.3rem 0.7rem;
border: 1px solid #ced4da;
appearance: none;
background-color: #fff;
background-clip: padding-box;
color: #212529;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
outline: none;
}
.btn {
display: inline-box;
cursor: pointer;
padding: 0.3rem 0.7rem;
border: none;
border: 1px solid transparent;
background-color: #333;
color: #fff;
text-align: center;
text-decoration: none;
vertical-align: middle;
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
.btn:hover {
background-color: #555;
}
@media (min-width:700px) {
.nav-check-label {
display: none;
}
.nav-box {
display: flex;
align-items: center;
flex-basis: auto;
flex-grow: 1;
}
.nav-menu {
flex-direction: row;
margin-left: 1rem;
gap: 1rem;
}
}
</style><style id="pic-style"></style><style id="body-style">body,#svg-section {font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue','游ゴシック Medium',YuGothic,YuGothicM,'Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;}</style></head><body id="svg-section" class="vsc-initialized" style="width: 700px; height: 393.75px; transform-origin: left top; transform: scale(1); overflow: auto;"><div class="pic-container" height="100%">
<nav class="navbar">
<div class="nav-title">
<a href="#">
タイトル
</a>
</div>
<input class="nav-check" id="nav-check" checked="" type="checkbox">
<label class="nav-check-label" for="nav-check"><i class="fas fa-bars"></i></label>
<div class="nav-box">
<ul class="nav-menu">
<li><a href="#" class="nav-link active">リンク1</a></li>
<li><a href="#" class="nav-link">リンク2</a></li>
<li><a href="#" class="nav-link">リンク3</a></li>
</ul>
<form class="nav-search-box">
<input class="form-input" type="text" placeholder="キーワード">
<button class="btn" type="submit">
<i class="fas fa-search"></i>
</button>
</form>
</div>
</nav>
</div>
</body></html>